<!DOCTYPE html>



  


<html class="theme-next muse use-motion" lang="zh-Hans">
<head><meta name="generator" content="Hexo 3.8.0">
  <meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="theme-color" content="#222">









<meta http-equiv="Cache-Control" content="no-transform">
<meta http-equiv="Cache-Control" content="no-siteapp">
















  
  
  <link href="/lib/fancybox/source/jquery.fancybox.css?v=2.1.5" rel="stylesheet" type="text/css">







<link href="/lib/font-awesome/css/font-awesome.min.css?v=4.6.2" rel="stylesheet" type="text/css">

<link href="/css/main.css?v=5.1.4" rel="stylesheet" type="text/css">


  <link rel="apple-touch-icon" sizes="180x180" href="/images/apple-touch-icon-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32-next.png?v=5.1.4">


  <link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16-next.png?v=5.1.4">


  <link rel="mask-icon" href="/images/logo.svg?v=5.1.4" color="#222">





  <meta name="keywords" content="Hexo, NexT">





  <link rel="alternate" href="/atom.xml" title="renhao" type="application/atom+xml">






<meta name="description" content="js 部分整理包括三部分。">
<meta property="og:type" content="article">
<meta property="og:title" content="前端面试总结 js 部分">
<meta property="og:url" content="https://huangrenhao.gitee.io/2020/09/24/js-interview/index.html">
<meta property="og:site_name" content="renhao">
<meta property="og:description" content="js 部分整理包括三部分。">
<meta property="og:locale" content="zh-Hans">
<meta property="og:image" content="https://huangrenhao.gitee.io/2020/09/24/js-interview/double-equal-sign.png">
<meta property="og:updated_time" content="2020-11-10T01:48:06.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="前端面试总结 js 部分">
<meta name="twitter:description" content="js 部分整理包括三部分。">
<meta name="twitter:image" content="https://huangrenhao.gitee.io/2020/09/24/js-interview/double-equal-sign.png">



<script type="text/javascript" id="hexo.configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    root: '/',
    scheme: 'Muse',
    version: '5.1.4',
    sidebar: {"position":"left","display":"post","offset":12,"b2t":false,"scrollpercent":false,"onmobile":false},
    fancybox: true,
    tabs: true,
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
    duoshuo: {
      userId: '0',
      author: '博主'
    },
    algolia: {
      applicationID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    }
  };
</script>



  <link rel="canonical" href="https://huangrenhao.gitee.io/2020/09/24/js-interview/">





  <title>前端面试总结 js 部分 | renhao</title>
  








<link rel="stylesheet" href="/css/prism-tomorrow.css" type="text/css"></head>

<body itemscope="" itemtype="http://schema.org/WebPage" lang="zh-Hans">
  
  
    
  

  <div class="container sidebar-position-left page-post-detail">
    <div class="headband"></div>

    <header id="header" class="header" itemscope="" itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-wrapper">
  <div class="site-meta ">
    

    <div class="custom-logo-site-title">
      <a href="/" class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">renhao</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
      
        <p class="site-subtitle"></p>
      
  </div>

  <div class="site-nav-toggle">
    <button>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
      <span class="btn-bar"></span>
    </button>
  </div>
</div>

<nav class="site-nav">
  

  
    <ul id="menu" class="menu">
      
        
        <li class="menu-item menu-item-home">
          <a href="/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-home"></i> <br>
            
            首页
          </a>
        </li>
      
        
        <li class="menu-item menu-item-categories">
          <a href="/categories/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-th"></i> <br>
            
            分类
          </a>
        </li>
      
        
        <li class="menu-item menu-item-archives">
          <a href="/archives/" rel="section">
            
              <i class="menu-item-icon fa fa-fw fa-archive"></i> <br>
            
            归档
          </a>
        </li>
      

      
    </ul>
  

  
</nav>



 </div>
    </header>

    <main id="main" class="main">
      <div class="main-inner">
        <div class="content-wrap">
          <div id="content" class="content">
            

  <div id="posts" class="posts-expand">
    

  

  
  
  

  <article class="post post-type-normal" itemscope="" itemtype="http://schema.org/Article">
  
  
  
  <div class="post-block">
    <link itemprop="mainEntityOfPage" href="https://huangrenhao.gitee.io/2020/09/24/js-interview/">

    <span hidden itemprop="author" itemscope="" itemtype="http://schema.org/Person">
      <meta itemprop="name" content="renhao">
      <meta itemprop="description" content="">
      <meta itemprop="image" content="/images/avatar.gif">
    </span>

    <span hidden itemprop="publisher" itemscope="" itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="renhao">
    </span>

    
      <header class="post-header">

        
        
          <h1 class="post-title" itemprop="name headline">前端面试总结 js 部分</h1>
        

        <div class="post-meta">
          <span class="post-time">
            
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              
                <span class="post-meta-item-text">发表于</span>
              
              <time title="创建于" itemprop="dateCreated datePublished" datetime="2020-09-24T08:34:04+08:00">
                2020-09-24
              </time>
            

            

            
          </span>

          
            <span class="post-category">
            
              <span class="post-meta-divider">|</span>
            
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              
                <span class="post-meta-item-text">分类于</span>
              
              
                <span itemprop="about" itemscope="" itemtype="http://schema.org/Thing">
                  <a href="/categories/interview/" itemprop="url" rel="index">
                    <span itemprop="name">interview</span>
                  </a>
                </span>

                
                
              
            </span>
          

          
            
              <span class="post-comments-count">
                <span class="post-meta-divider">|</span>
                <span class="post-meta-item-icon">
                  <i class="fa fa-comment-o"></i>
                </span>
                <a href="/2020/09/24/js-interview/#comments" itemprop="discussionUrl">
                  <span class="post-comments-count valine-comment-count" data-xid="/2020/09/24/js-interview/" itemprop="commentCount"></span>
                </a>
              </span>
            
          

          
          

          

          
            <div class="post-wordcount">
              
                
                <span class="post-meta-item-icon">
                  <i class="fa fa-file-word-o"></i>
                </span>
                
                  <span class="post-meta-item-text">字数统计&#58;</span>
                
                <span title="字数统计">
                  11.7k
                </span>
              

              
                <span class="post-meta-divider">|</span>
              

              
                <span class="post-meta-item-icon">
                  <i class="fa fa-clock-o"></i>
                </span>
                
                  <span class="post-meta-item-text">阅读时长 &asymp;</span>
                
                <span title="阅读时长">
                  47
                </span>
              
            </div>
          

          

        </div>
      </header>
    

    
    
    
    <div class="post-body" itemprop="articleBody">

      
      

      
        <p>js 部分整理包括三部分。<a id="more"></a>分别是基础知识概念、看代码说输出和手写常见 js 题</p>
<h2 id="基础知识概念"><a href="#基础知识概念" class="headerlink" title="基础知识概念"></a>基础知识概念</h2><h3 id="内置类型"><a href="#内置类型" class="headerlink" title="内置类型"></a>内置类型</h3><p>JS 中分为七种内置类型，七种内置类型又分为两大类型：基本类型和对象（Object）。基本类型有六种： <code>null</code>，<code>undefined</code>，<code>boolean</code>，<code>number</code>，<code>string</code>，<code>symbol</code>。其中 JS 的数字类型是浮点类型的，没有整型。<code>NaN</code> 也属于 <code>number</code> 类型，并且 <code>NaN</code> 不等于自身。对于基本类型来说，如果使用字面量的方式，那么这个变量只是个字面量，只有在必要的时候才会转换为对应的类型。对象（Object）是引用类型。引用类型还包括 Array、Function</p>
<blockquote>
<p>字面量：在计算机科学中，用于表达源代码中一个固定值的表示法（notation）。几乎所有计算机编程语言都具有对基本值的字面量表示，诸如：整数、浮点数以及字符串；而有很多也对布尔类型和字符类型的值也支持字面量表示；还有一些甚至对枚举类型的元素以及像数组、记录和对象等复合类型的值也支持字面量表示法。<code>const int b = 10</code>中b为常量，10为字面量。</p>
</blockquote>
<p>symbol：通常被用作一个对象属性的键值（一般用来实现私有属性）。Symbol 值通过<code>Symbol</code>函数生成，它是独一无二的，可以保证不会与其他属性名产生冲突。不能与其他类型的值进行运算，可以显式转为字符串和布尔值。Symbol 作为属性名，该属性不会出现在<code>for...in</code>、<code>for...of</code>循环中，也不会被<code>Object.keys()</code>、<code>Object.getOwnPropertyNames()</code>、<code>JSON.stringify()</code>返回。<code>Object.getOwnPropertySymbols</code>方法可以获取指定对象的所有 Symbol 属性名。</p>
<pre class=" language-javascript"><code class="language-javascript"><span class="token keyword">var</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token string">'123'</span><span class="token punctuation">,</span> b <span class="token operator">=</span> <span class="token number">123</span><span class="token punctuation">,</span> c <span class="token operator">=</span> <span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token string">'123'</span><span class="token punctuation">)</span><span class="token punctuation">,</span> d <span class="token operator">=</span> <span class="token function">Symbol</span><span class="token punctuation">(</span><span class="token string">'123'</span><span class="token punctuation">)</span>
obj<span class="token punctuation">[</span>a<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string">'a'</span>
obj<span class="token punctuation">[</span>b<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string">'b'</span>
obj<span class="token punctuation">[</span>c<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string">'c'</span>
obj<span class="token punctuation">[</span>d<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token string">'d'</span>

<span class="token comment" spellcheck="true">// obj[a]</span>
<span class="token comment" spellcheck="true">// obj[b]</span>
<span class="token comment" spellcheck="true">// obj[c]</span>
<span class="token comment" spellcheck="true">// obj[d]</span>
</code></pre>
<p>Object 与 map 的区别：两者都是键值对的方式</p>
<ul>
<li>但 Object 的键只能是基础数据类型（整数、字符串、symbol），如果将一个对象作为键值会进行类型转换，而 map 支持 js 所有数据类型作为键值。</li>
<li>map 继承自 object 对象</li>
<li>元素顺序、访问方式、获取size区别</li>
</ul>
<h3 id="Typeof和instance"><a href="#Typeof和instance" class="headerlink" title="Typeof和instance"></a>Typeof和instance</h3><p><code>typeof</code> 对于基本类型，除了 <code>null</code> 都可以显示正确的类型。<code>typeof</code> 对于对象，除了函数<code>function</code>都会显示 <code>object</code>。对于 <code>null</code> 来说，虽然它是基本类型，但是会显示 <code>object</code>。</p>
<blockquote>
<p>因为在 JS 的最初版本中，使用的是 32 位系统，为了性能考虑使用变量机器码低位存储了其类型信息，<code>000</code> 开头代表是对象，然而 <code>null</code> 表示为全零，所以将它错误的判断为 <code>object</code> 。虽然现在的内部类型判断代码已经改变了，但是对于这个 Bug 却是一直流传下来</p>
<p>小知识：undefined 不是保留字，可以在低版本浏览器中赋值，采用 undefined可能会出错，可以用 void 后面跟上一个组成表达式，例如<code>void 0</code>返回的就是undefined。</p>
</blockquote>
<p><strong>最好用</strong>：如果我们想获得一个变量的正确类型，可以通过 <code>Object.prototype.toString.call(xx)</code>。这样我们就可以获得类似 <code>[object Type]</code> 的字符串。</p>
<p>instanceof主要作用就是判断一个实例是否属于某种类型、父类型或者祖先类型的实例。instanceof的主要实现原理就是只要<strong>右边变量的prototype</strong>在<strong>左边变量的原型链</strong>上即可，instanceof在查找的过程中会遍历左边变量的原型链，直到找到右边变量的prototype，如果查找失败返回false。</p>
<pre class=" language-javascript"><code class="language-javascript"><span class="token keyword">function</span> <span class="token function">new_instance_of</span><span class="token punctuation">(</span>leftVaule<span class="token punctuation">,</span> rightVaule<span class="token punctuation">)</span> <span class="token punctuation">{</span> 
    <span class="token keyword">let</span> rightProto <span class="token operator">=</span> rightVaule<span class="token punctuation">.</span>prototype<span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// 取右表达式的 prototype 值</span>
    leftVaule <span class="token operator">=</span> leftVaule<span class="token punctuation">.</span>__proto__<span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// 取左表达式的__proto__值</span>
    <span class="token keyword">while</span> <span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>leftVaule <span class="token operator">===</span> <span class="token keyword">null</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>    
        <span class="token punctuation">}</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>leftVaule <span class="token operator">===</span> rightProto<span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> <span class="token boolean">true</span><span class="token punctuation">;</span>    
        <span class="token punctuation">}</span> 
        leftVaule <span class="token operator">=</span> leftVaule<span class="token punctuation">.</span>__proto__ 
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
<pre class=" language-javascript"><code class="language-javascript"><span class="token keyword">function</span> <span class="token function">foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token keyword">typeof</span> Function<span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// function</span>
<span class="token keyword">typeof</span> foo<span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// function</span>
<span class="token keyword">typeof</span> Object<span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// function</span>
Object <span class="token keyword">instanceof</span> <span class="token class-name">Object</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// true </span>
Function <span class="token keyword">instanceof</span> <span class="token class-name">Function</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// true</span>
Function <span class="token keyword">instanceof</span> <span class="token class-name">Object</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// true</span>
Foo <span class="token keyword">instanceof</span> <span class="token class-name">Foo</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// false</span>
Foo <span class="token keyword">instanceof</span> <span class="token class-name">Object</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// true</span>
Foo <span class="token keyword">instanceof</span> <span class="token class-name">Function</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// true</span>
<span class="token keyword">null</span> <span class="token keyword">instanceof</span> <span class="token class-name">Object</span> <span class="token comment" spellcheck="true">// false</span>
</code></pre>
<p>Object 本身是一个函数，由 Function 所创建，所以 <code>Object.__proto__</code> 的值是 <code>Function.prototype</code>，而 <code>Function.prototype</code> 的 <code>__proto__</code> 属性是 <code>Object.prototype</code>。</p>
<p>Foo 函数的 <code>prototype</code> 属性是 <code>Foo.prototype</code>，而 Foo 的 <code>__proto__</code> 属性是 <code>Function.prototype</code>。</p>
<p>instanceof 的缺点：基础类型没有被封装为对象，如 Number()、String()，在判断时会出错，即 instanof 检测的一定要是对象才行。同理 Number() 等返回的对象也在 Object 的原型链上</p>
<pre class=" language-js"><code class="language-js"><span class="token keyword">var</span> num <span class="token operator">=</span> <span class="token number">1</span>
num<span class="token punctuation">.</span>__proto__ <span class="token operator">===</span> Number<span class="token punctuation">.</span>prototype <span class="token comment" spellcheck="true">// true</span>
num <span class="token keyword">instanceof</span> <span class="token class-name">Number</span> <span class="token comment" spellcheck="true">// false</span>
<span class="token keyword">var</span> numA <span class="token operator">=</span> <span class="token function">Number</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span>
numA <span class="token keyword">instanceof</span> <span class="token class-name">Number</span> <span class="token comment" spellcheck="true">// false</span>
<span class="token keyword">var</span> numB <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Number</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span>
numB <span class="token keyword">instanceof</span> <span class="token class-name">Number</span> <span class="token comment" spellcheck="true">// true</span>
<span class="token keyword">var</span> s <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">String</span><span class="token punctuation">(</span><span class="token string">'a'</span><span class="token punctuation">)</span>
s <span class="token operator">==</span> <span class="token string">'a'</span> <span class="token comment" spellcheck="true">// true</span>
s <span class="token operator">===</span> <span class="token string">'a'</span> <span class="token comment" spellcheck="true">// false</span>
</code></pre>
<h4 id="NaN"><a href="#NaN" class="headerlink" title="NaN"></a>NaN</h4><p><code>typeof NaN</code> 为 number，window.isNaN 会有一个强制类型转换的过程，将接受到的参数强制转换成数字类型，故 <code>window.isNaN(&#39;AB&#39;),window.isNaN(&#39;undefined&#39;),window.isNaN({})</code>会显示为 true，而Number.isNaN 不会有自动的类型判断，实现就利用是否与自身相等或<code>typeof n ===&#39;number&#39; &amp;&amp; window.isNaN(n)</code></p>
<h4 id=""><a href="#" class="headerlink" title="??"></a>??</h4><p>?? 和 || 很像，但 ?? 不会屏蔽掉 false 和 0。</p>
<pre><code>false || &#39;1&#39; // &quot;1&quot;
false ?? &#39;1&#39; // false
0 || &#39;1&#39; // &quot;1&quot;
0 ?? &#39;1&#39; // 0
</code></pre><h3 id="类型转换"><a href="#类型转换" class="headerlink" title="类型转换"></a>类型转换</h3><p>转Boolean：在条件判断时，除了 <code>undefined</code>， <code>null</code>， <code>false</code>， <code>NaN</code>， <code>&#39;&#39;</code>， <code>0</code>， <code>-0</code>，其他所有值都转为 <code>true</code>，包括所有对象。</p>
<p>对象转基本类型：首先调用<code>valueOf</code>然后调用<code>toString</code>（这两个方法都可重写）。也可重写<code>Symbol.toPrimitive</code>（在转基本类型调用优先级最高），一般都不显示调用。</p>
<blockquote>
<p><code>valueOf()</code>：同<code>toString()</code>方法类似，为Object的原型方法，当需要返回对象的原始值而非字符串的时候使用valueOf。重写的valueof方法中不能传入参数。</p>
<p><code>Sysbol.toPrimitive</code>指向一个方法，该对象被转为原始类型的值时调用这个方法，返回该对象对应的原始类型值。可以接受一个字符串参数（表示当前运算模式）：Number、String、Default。</p>
</blockquote>
<p>四则运算：隐式类型转换，加法运算中如果其中一方是字符串类型就会把另一个也转为字符串类型，其他运算中只要其中一方是数字就将另一方转为数字。</p>
<p><code>==</code>操作符：</p>
<p><img src="/2020/09/24/js-interview/double-equal-sign.png" alt="比较规则"></p>
<p>隐式类型转换：</p>
<ul>
<li>如果比较的两个值是同一类型，除 null 和 undefined 相等外，其余都是正常</li>
<li>如果都是基本类型，先转数字后再比较</li>
<li>如果有一方是引用类型，将引用类型转基本类型后比较</li>
</ul>
<p><code>toPrimitive</code>就是对象转基本类型  。例子：</p>
<pre class=" language-js"><code class="language-js"><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">==</span> <span class="token operator">!</span><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token comment" spellcheck="true">//->true</span>
<span class="token comment" spellcheck="true">// [] 转成 true，然后取反变成 false</span>
<span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">==</span> <span class="token boolean">false</span>
<span class="token comment" spellcheck="true">// 根据第 8 条得出</span>
<span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">==</span> <span class="token function">ToNumber</span><span class="token punctuation">(</span><span class="token boolean">false</span><span class="token punctuation">)</span>
<span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">==</span> <span class="token number">0</span>
<span class="token comment" spellcheck="true">// 根据第 10 条得出、</span>
<span class="token function">ToPrimitive</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token operator">==</span> <span class="token number">0</span>
<span class="token comment" spellcheck="true">// [].toString() -> ''</span>
<span class="token string">''</span> <span class="token operator">==</span> <span class="token number">0</span>
<span class="token comment" spellcheck="true">// 根据第 6 条得出</span>
<span class="token number">0</span> <span class="token operator">==</span> <span class="token number">0</span> <span class="token comment" spellcheck="true">// -> true</span>
<span class="token operator">!</span><span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">==</span> <span class="token string">''</span> <span class="token comment" spellcheck="true">// true</span>
<span class="token number">3</span> <span class="token operator">+</span> <span class="token string">'2'</span> <span class="token operator">===</span> <span class="token number">5</span> <span class="token comment" spellcheck="true">// false</span>
<span class="token keyword">null</span> <span class="token operator">==</span> <span class="token boolean">false</span> <span class="token comment" spellcheck="true">// false</span>
<span class="token keyword">null</span> <span class="token operator">==</span> undefined <span class="token comment" spellcheck="true">// true</span>
<span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token operator">==</span> <span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token comment" spellcheck="true">// false</span>
</code></pre>
<p>比较运算符：</p>
<ul>
<li>对象：通过<code>toPrimitive</code>转换对象</li>
<li>字符串：通过<code>nicode</code>字符索引来比较</li>
</ul>
<h3 id="new"><a href="#new" class="headerlink" title="new"></a>new</h3><p>调用new的过程中会依次发生：</p>
<ol>
<li>新生成一个对象</li>
<li>链接到原型</li>
<li>绑定this</li>
<li>返回新对象</li>
</ol>
<pre class=" language-js"><code class="language-js"><span class="token comment" spellcheck="true">// 类似以上步骤实现new</span>
<span class="token keyword">function</span> <span class="token function">create</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment" spellcheck="true">// 创建一个空的对象</span>
    <span class="token keyword">let</span> obj <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Object</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
    <span class="token comment" spellcheck="true">// 获得构造函数</span>
    <span class="token keyword">let</span> Con <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">.</span>shift<span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>arguments<span class="token punctuation">)</span>
    <span class="token comment" spellcheck="true">// 链接到原型</span>
    obj<span class="token punctuation">.</span>__proto__ <span class="token operator">=</span> Con<span class="token punctuation">.</span>prototype
    <span class="token comment" spellcheck="true">// 绑定 this，执行构造函数</span>
    <span class="token keyword">let</span> result <span class="token operator">=</span> Con<span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span>obj<span class="token punctuation">,</span> arguments<span class="token punctuation">)</span>
    <span class="token comment" spellcheck="true">// 确保 new 出来的是个对象</span>
    <span class="token keyword">return</span> <span class="token keyword">typeof</span> result <span class="token operator">===</span> <span class="token string">'object'</span> <span class="token operator">?</span> result <span class="token punctuation">:</span> obj
<span class="token punctuation">}</span>
</code></pre>
<h3 id="async和await"><a href="#async和await" class="headerlink" title="async和await"></a>async和await</h3><pre class=" language-js"><code class="language-js"><span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token number">0</span>
<span class="token keyword">var</span> b <span class="token operator">=</span> <span class="token keyword">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
  a <span class="token operator">=</span> a <span class="token operator">+</span> <span class="token keyword">await</span> <span class="token number">10</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'2'</span><span class="token punctuation">,</span> a<span class="token punctuation">)</span> <span class="token comment" spellcheck="true">// -> '2' 10</span>
  a <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token keyword">await</span> <span class="token number">10</span><span class="token punctuation">)</span> <span class="token operator">+</span> a
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'3'</span><span class="token punctuation">,</span> a<span class="token punctuation">)</span> <span class="token comment" spellcheck="true">// -> '3' 20</span>
<span class="token punctuation">}</span>
<span class="token function">b</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
a<span class="token operator">++</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'1'</span><span class="token punctuation">,</span> a<span class="token punctuation">)</span> <span class="token comment" spellcheck="true">// -> '1' 1</span>
</code></pre>
<ul>
<li>首先函数 <code>b</code> 先执行，在执行到 <code>await 10</code> 之前变量 <code>a</code> 还是 0，因为在 <code>await</code> 内部实现了 <code>generators</code> ，<code>generators</code> 会保留堆栈中东西，所以这时候 <code>a = 0</code> 被保存了下来</li>
<li>因为 <code>await</code> 是异步操作，遇到<code>await</code>就会立即返回一个<code>pending</code>状态的<code>Promise</code>对象，暂时返回执行代码的控制权，使得函数外的代码得以继续执行，所以会先执行 <code>console.log(&#39;1&#39;, a)</code></li>
<li>这时候同步代码执行完毕，开始执行异步代码，将保存下来的值拿出来使用，这时候 <code>a = 10</code></li>
<li>然后后面就是常规执行代码了</li>
</ul>
<blockquote>
<p><code>async</code>函数返回一个 Promise 对象，可以使用<code>then</code>方法添加回调函数。当函数执行的时候，一旦遇到<code>await</code>就会先返回，等到异步操作完成，<strong>再接着执行函数体内后面的语句</strong>。</p>
</blockquote>
<h3 id="Proxy"><a href="#Proxy" class="headerlink" title="Proxy"></a>Proxy</h3><p>es6新增功能，用于修改某些操作的默认行为，等同于在语言层面做出修改，属于一种“元编程”（对编程语言进行编程）。可以理解为在目标对象之前架设一层“拦截”，外界对该对象的访问都必须先通过这层拦截，可以对外界访问进行过滤和改写。</p>
<p>Proxy构造函数<code>var proxy = new Proxy(target,handler)</code>，Proxy对象的所有用法都是这种形式，不同的只是handler参数的用法。<code>new Proxy()</code>表示生成一个Proxy实例，target参数表示所要拦截的目标对象，handler参数用来定制拦截行为，没有设置任何拦截等同于直接通向原对象。</p>
<p>实例：</p>
<pre class=" language-js"><code class="language-js"><span class="token keyword">let</span> onWatch <span class="token operator">=</span> <span class="token punctuation">(</span>obj<span class="token punctuation">,</span> setBind<span class="token punctuation">,</span> getLogger<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
  <span class="token keyword">let</span> handler <span class="token operator">=</span> <span class="token punctuation">{</span>
    <span class="token keyword">get</span><span class="token punctuation">(</span>target<span class="token punctuation">,</span> property<span class="token punctuation">,</span> receiver<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token function">getLogger</span><span class="token punctuation">(</span>target<span class="token punctuation">,</span> property<span class="token punctuation">)</span>
      <span class="token keyword">return</span> Reflect<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span>target<span class="token punctuation">,</span> property<span class="token punctuation">,</span> receiver<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    <span class="token keyword">set</span><span class="token punctuation">(</span>target<span class="token punctuation">,</span> property<span class="token punctuation">,</span> value<span class="token punctuation">,</span> receiver<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token function">setBind</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">return</span> Reflect<span class="token punctuation">.</span><span class="token keyword">set</span><span class="token punctuation">(</span>target<span class="token punctuation">,</span> property<span class="token punctuation">,</span> value<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Proxy</span><span class="token punctuation">(</span>obj<span class="token punctuation">,</span> handler<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>

<span class="token keyword">let</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span> a<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">}</span>
<span class="token keyword">let</span> value
<span class="token keyword">let</span> p <span class="token operator">=</span> <span class="token function">onWatch</span><span class="token punctuation">(</span>obj<span class="token punctuation">,</span> <span class="token punctuation">(</span>v<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
  value <span class="token operator">=</span> v
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token punctuation">(</span>target<span class="token punctuation">,</span> property<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token string">`Get '</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>property<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">' = </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>target<span class="token punctuation">[</span>property<span class="token punctuation">]</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
p<span class="token punctuation">.</span>a <span class="token operator">=</span> <span class="token number">2</span> <span class="token comment" spellcheck="true">// bind `value` to `2`</span>
p<span class="token punctuation">.</span>a <span class="token comment" spellcheck="true">// -> Get 'a' = 2</span>
</code></pre>
<h3 id="精度问题"><a href="#精度问题" class="headerlink" title="精度问题"></a>精度问题</h3><p>类似于C++中判断两个double型的数值是否相等时，使用的方法是判断它们之差的绝对值是不是在一个很小的范围内，如果两个数相差很小就可以认为它们相等，深层的原因是计算机内表示小数时（C++是float和double型小数）存在误差。</p>
<p>JS采用IEEE 754双精度版本（64位），六十四位符号位占一位（S，63)，阶码位（指数位）占十一位（E，62~52，1~2046），其余五十二位都为小数位（有效数字）（M，51~0）。转化为十进制时：(-1)<sup>S</sup> <em> 2<sup>E-1023</sup> </em> (1+$\sum_{i=0}^{52}$(M<sub>i</sub>*2<sup>-i</sup>))</p>
<blockquote>
<p>ar双精度浮点数：其数值范围为 <code>-1.7E-308~1.7E+308</code>，二进制表示为：</p>
<ul>
<li>规约最小值：<code>* 000 0000 0001 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000 0000</code></li>
<li>规约最大值：<code>* 111 1111 1110 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111 1111</code></li>
</ul>
</blockquote>
<p>小数算二进制同整数不同。整数是辗转相除，小数则为辗转相乘。乘法计算时（每次乘2），只计算小数位，相乘的结果中整数位用作每一位的二进制，将其结果中的小数位继续进行辗转相乘。一般的小数最后的表示都是无限循环的二进制，需要在小数末尾处判断是否需要进位（同十进制的四舍五入类似）。</p>
<p>解决精度问题（0.1+0.2 不等于 0.3）：扩大倍数，将小数都扩大相同倍数至整数，整数运算后再缩小。</p>
<blockquote>
<p>参考：</p>
<p><a href="https://baike.baidu.com/item/%E5%8F%8C%E7%B2%BE%E5%BA%A6%E6%B5%AE%E7%82%B9%E6%95%B0/4502803?fr=aladdin" target="_blank" rel="noopener">百度百科：双精度浮点数</a></p>
</blockquote>
<h3 id="数值问题"><a href="#数值问题" class="headerlink" title="数值问题"></a>数值问题</h3><ul>
<li><code>Infinity</code>：全局属性，无穷大（大于任何值），不是常量，但可覆盖在 ES5 中已经被改为只读。</li>
<li><code>Number.POSITIVE_INFINITY</code>：初始值为 <code>Infinity</code>，常量不可重写。<code>Number.NAGETIVE_INFINITY</code>：初始值为 <code>-Infinity</code>。</li>
<li><code>Number.MAX_SAFE_INTEGER</code> ：常量，2<sup>53</sup> -1。由于 JS 采用 IEEE 754 双精度版本，该格式下<strong>安全表示</strong>的最大整数即 -(2<sup>53</sup> - 1) 到 2<sup>53</sup> -1 之间的数值（包含边界），安全表示即能够准确区分两个不相同的值，2<sup>53</sup>  就不是一个安全整数，即使它可以被 IEEE 754 直接准确表示，但  2<sup>53</sup> +1 不能被 IEEE 754 直接准确表示，会被近似为 2<sup>53</sup> （round-to-nearest、round-to-zero），即 2<sup>53</sup> + 1 === 2<sup>53</sup> 会被判定为 true（这在数学上是错误的）。在 [-2<sup>53</sup>,2<sup>53</sup>] 之间的值都能精确表示，介于 Infinity 和此最大值之间的数无法精确表示，不能被精确表示下来的大多数原因是超过 53 位有效数字的不能被保存下来（变成 0）。</li>
<li><code>Number.MAX_VALUE</code>：指数部分为 11 位，最大为 2047，即能够表示的数值范围为 (2<sup>-1023</sup>,2<sup>1024</sup>)，大于最大值得到的是 Infinity （正向溢出），负向溢出返回 0。</li>
</ul>
<p>js 数组最大的长度为 2<sup>32</sup>-1。2<sup>32</sup> 会报错，无符号 int 型的最大长度为 2<sup>32</sup>-1</p>
<blockquote>
<p>参考：</p>
<p><a href="http://javascript.ruanyifeng.com/grammar/number.html" target="_blank" rel="noopener"><strong>阮一峰 JavaScript标准教程 数值</strong></a></p>
<p><a href="https://cloud.tencent.com/developer/ask/104699" target="_blank" rel="noopener">JS Number.MAX_SAFE_INTEGER和MAX_VALUE有什么区别？</a></p>
<p><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER" target="_blank" rel="noopener">MDN : MAX_SAFE_VALUE</a></p>
<p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/isSafeInteger" target="_blank" rel="noopener">MDN : isSafeInteger</a></p>
<p><a href="https://segmentfault.com/a/1190000000407658" target="_blank" rel="noopener">图解：JavaScript中Number的一些表示上/下限</a></p>
</blockquote>
<ul>
<li>V8 中在 32 位系统下能表示的最大整形数字为 <code>Math(2,30)-1</code>，原因是 V8 中对于 32 bits 长的值做了进一步分类，其中最低位作为区分，如果为 0 表示该值为 31 bits 长的整数，如果为 1 表示该值是 30 bits 长的指针。</li>
</ul>
<blockquote>
<p>参考：</p>
<p><a href="https://www.jianshu.com/p/0c826cc2cc41" target="_blank" rel="noopener">v8知识总结</a></p>
</blockquote>
<h3 id="遍历对象和数组（包括-es6）"><a href="#遍历对象和数组（包括-es6）" class="headerlink" title="遍历对象和数组（包括 es6）"></a>遍历对象和数组（包括 es6）</h3><h4 id="对象"><a href="#对象" class="headerlink" title="对象"></a>对象</h4><ul>
<li><p>for in ，遍历对象自身和<strong>继承</strong>的可枚举属性（不含 Symbol），可以用 hasOwnProperty 过滤原型上的属性。键值遍历</p>
</li>
<li><p>Object.keys，返回一个包括对象自身（不包含继承）的所有可枚举属性（不含 Symbol）的键值数组</p>
<p>Object.values，同 Object.keys，返回的是 value 数组</p>
</li>
<li><p>Object.getOwnPropertyNames(obj)，返回一个包含对象自身所有属性（不包含 Symbol，但包括不可枚举属性）的键值数组</p>
</li>
<li><p>Reflect.ownKeys(obj)，返回一个对象自身的所有属性（包含 Symbol、不可枚举属性）的键值数组</p>
</li>
</ul>
<blockquote>
<p>可枚举性：对象 enumerable 属性，引入可枚举是为了让某些属性可规避掉 for in 操作，否则所有内部属性和方法都会被遍历到。目前，有四个操作会忽略<code>enumerable</code>为<code>false</code>的属性。</p>
<ul>
<li><code>for...in</code>循环：只遍历对象自身的和继承的可枚举的属性。</li>
<li><code>Object.keys()</code>：返回对象自身的所有可枚举的属性的键名。</li>
<li><code>JSON.stringify()</code>：只串行化对象自身的可枚举的属性。序列化的时候遇到 undefined 和函数的时候都会跳过。</li>
<li><code>Object.assign()</code>： 忽略<code>enumerable</code>为<code>false</code>的属性，只拷贝对象自身的可枚举的属性。</li>
</ul>
</blockquote>
<h4 id="数组"><a href="#数组" class="headerlink" title="数组"></a>数组</h4><ul>
<li>forEach</li>
<li>for in ，下标遍历</li>
<li>for of，具有 iterator 接口（部署了 Symbol.iterator 属性）都可以遍历，如数组、set、map、类数组对象（ arguments 对象、DOM NodeList 对象、Generator 对象）。扩展运算符<code>...</code>内部使用 for of 遍历</li>
</ul>
<h3 id="es5-继承和-es6继承的区别"><a href="#es5-继承和-es6继承的区别" class="headerlink" title="es5 继承和 es6继承的区别"></a>es5 继承和 es6继承的区别</h3><p>es6 可以通过<code>extends</code>关键字实现继承，这比 ES5 的通过修改原型链实现继承要更加清晰、方便。</p>
<p>ES5 的继承，实质是先创造子类的实例对象<code>this</code>，然后再将父类的方法添加到<code>this</code>上面（<code>Parent.apply(this)</code>）。ES6 的继承机制完全不同，实质是先将父类实例对象的属性和方法，加到<code>this</code>上面（所以必须先调用<code>super</code>方法），然后再用子类的构造函数修改<code>this</code>。</p>
<h4 id="js-继承与-java-继承区别"><a href="#js-继承与-java-继承区别" class="headerlink" title="js 继承与 java 继承区别"></a>js 继承与 java 继承区别</h4><ul>
<li><p>java 里没有多继承，即一个子类同时继承多个父类，但通过实现多个接口可以间接实现多继承，js 可以通过组合继承的方式实现多继承，同名属性或共有方法会被覆盖。</p>
</li>
<li><p>如何才能像C#或者java里那样，在子类型中调用父类的方法呢？比如<code>Son.prototype.show=function(){super.show()}</code>这样：可以利用 <code>Object.getPrototypeOf</code>从子类上获取父类，故可通过 <code>Object.getPrototypeOf(Son.prototype)</code>父类的原型对象。</p>
<blockquote>
<p><a href="https://www.cnblogs.com/chengzi/p/5623280.html" target="_blank" rel="noopener">参考 子类型中调用父类方法</a></p>
</blockquote>
</li>
</ul>
<h3 id="令对象不可新增属性，但可以修改当前属性用什么？"><a href="#令对象不可新增属性，但可以修改当前属性用什么？" class="headerlink" title="令对象不可新增属性，但可以修改当前属性用什么？"></a>令对象不可新增属性，但可以修改当前属性用什么？</h3><ul>
<li><p><code>Object.preventExtensions</code>，阻止对象扩展，让<strong>一个对象变得不可扩展即不能再添加新的属性</strong></p>
</li>
<li><p><code>Object.seal</code>，让一个对象密封，并返回被密封后的对象。密封指的是不能添加新的属性，不能删除已有属性，不能修改已有属性的可枚举性、可配置性、可写性，但<strong>可以修改已有属性的值</strong>。</p>
</li>
<li><p><code>Object.freeze</code>，冻结是指不能添加新的属性、不能修改已有属性的值，不能删除已有属性，以及不能修改已有属性的可枚举性、可配置性、可写性。即<strong>对象永远不可变</strong>。</p>
<p><code>Object.freeze</code>不是彻底冻结对象，<strong>只冻结一层</strong>，如果属性是对象，则该属性下的对象内属性值可以更改。实现的原理是通过 <code>Object.seal</code>将对象密封，让其不可以新增，不能删除，然后遍历对象中的属性，通过 Object.defineProperty 修改 writeable 属性（false）</p>
</li>
</ul>
<h3 id="toString-与-valueOf"><a href="#toString-与-valueOf" class="headerlink" title="toString 与 valueOf"></a>toString 与 valueOf</h3><p>所有 js 数据类型都有这两个方法（null、undefined 除外），用于解决 JavaScript 值运算与显示的问题。alert 一个对象的时候调用的是 toString 方法，但如果存在 valueOf 则调用 valueOf（优先级更高）</p>
<pre class=" language-javascript"><code class="language-javascript"><span class="token keyword">var</span> aaa <span class="token operator">=</span> <span class="token punctuation">{</span>
    i<span class="token punctuation">:</span><span class="token number">10</span><span class="token punctuation">,</span>
    valueOf<span class="token punctuation">:</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'valueOf'</span><span class="token punctuation">)</span>
        <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>i <span class="token operator">+</span> <span class="token number">30</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
    toString<span class="token punctuation">:</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'toString'</span><span class="token punctuation">)</span>
        <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">valueOf</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token number">10</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token function">alert</span><span class="token punctuation">(</span>aaa <span class="token operator">></span> <span class="token number">20</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 
<span class="token comment" spellcheck="true">// valueOf</span>
<span class="token comment" spellcheck="true">// alert: true</span>
<span class="token function">alert</span><span class="token punctuation">(</span><span class="token operator">+</span>aaa<span class="token punctuation">)</span><span class="token punctuation">;</span> 
<span class="token comment" spellcheck="true">// valueOf</span>
<span class="token comment" spellcheck="true">// alert 40</span>
<span class="token function">alert</span><span class="token punctuation">(</span>aaa<span class="token punctuation">)</span><span class="token punctuation">;</span> 
<span class="token comment" spellcheck="true">// valueOf </span>
<span class="token comment" spellcheck="true">// alert 50</span>
</code></pre>
<pre class=" language-javascript"><code class="language-javascript"><span class="token keyword">var</span> aaa <span class="token operator">=</span> <span class="token punctuation">{</span>
    i<span class="token punctuation">:</span><span class="token number">10</span><span class="token punctuation">,</span>
    toString<span class="token punctuation">:</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'toString'</span><span class="token punctuation">)</span>
        <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>i<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token function">alert</span><span class="token punctuation">(</span>aaa <span class="token operator">></span> <span class="token number">20</span><span class="token punctuation">)</span><span class="token punctuation">;</span> 
<span class="token comment" spellcheck="true">// toString</span>
<span class="token comment" spellcheck="true">// alert: false</span>
<span class="token function">alert</span><span class="token punctuation">(</span><span class="token operator">+</span>aaa<span class="token punctuation">)</span><span class="token punctuation">;</span> 
<span class="token comment" spellcheck="true">// toString</span>
<span class="token comment" spellcheck="true">// alert 10</span>
<span class="token function">alert</span><span class="token punctuation">(</span>aaa<span class="token punctuation">)</span><span class="token punctuation">;</span> 
<span class="token comment" spellcheck="true">// toString</span>
<span class="token comment" spellcheck="true">// alert 10</span>
</code></pre>
<h3 id="parseInt-、parseFloat"><a href="#parseInt-、parseFloat" class="headerlink" title="parseInt 、parseFloat"></a>parseInt 、parseFloat</h3><p>parseInt 与 parseFloat 的区别在于 parseFloat 可以转换小数，此外 parseInt 有第二个参数表示转换的进制，为0 时默认为10进制，只有字符串中的第一个数字会被返回，并且<code>parseInt(&#39;3&#39;,&#39;2&#39;)</code>返回<code>NaN</code>，<code>parseInt(&#39;123&#39;,2)</code>返回<code>1</code>。两者<strong>转换数字的最大值相同</strong>，都是 Number.MAX_VALUE <code>1.7976931348623157e+308</code>，超出都会是 Infinity</p>
<p>需要注意：</p>
<ul>
<li>开头和结尾的空格是允许的。</li>
<li>“”空串，转换成NaN</li>
</ul>
<h3 id="拖拽事件"><a href="#拖拽事件" class="headerlink" title="拖拽事件"></a>拖拽事件</h3><pre><code>1、被拖对象：dragstart事件，被拖动的元素，开始拖放触发
2、被拖对象：drag事件，被拖放的元素，拖放过程中
3、经过对象：dragenter事件，拖放过程中鼠标经过的元素，被拖放的元素“开始”进入其它元素范围内（刚进入）
4、经过对象：dragover事件，拖放过程中鼠标经过的元素，被拖放的元素正在本元素范围内移动(一直)
5、经过对象：dragleave事件，拖放过程中鼠标经过的元素，被拖放的元素离开本元素范围
6、目标地点：drop事件，拖放的目标元素，其他元素被拖放到本元素中
7、被拖对象：dragend事件，拖放的对象元素，拖放操作结束
</code></pre><p>文件拖拽上传：可以监听目标元素（即拖拽区域）的 dragover 和 drop 事件，在 dragover 中设置 <code>evt.dataTransfer.dropEffect</code> 为 copy，在 drop 事件处理程序中拿到目标文件<code>e.dataTransfer.files</code>。需要注意都要在事件处理程序中增加 preventDefault 阻止默认操作，同时阻止事件冒泡 stopPropagation</p>
<pre><code>onmousedown
onmouseup
onmousemove
</code></pre><p>roi 项目中图片移动的实现：给目标元素的 mousedown 事件，在 mousedown 事件处理程序中首先获取当前点击位置（距目标元素边界距离），并给 document 增加 onmouseup 和 onmousemove 事件处理程序，在 mousemove 中拿到当前移动的位置 pageX,pageY 与前述距离重新计算目标元素应该出现的位置。在 mouseup 中移除 mousemove 中的事件处理程序。</p>
<blockquote>
<p>event.clientX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标，其中客户区域不包括窗口自身的控件和滚动条。 (可见区域)<br>event.clientY 设置或获取鼠标指针位置相对于当前窗口的 y 坐标，其中客户区域不包括窗口自身的控件和滚动条。 （可见区域）<br>event.offsetX 设置或获取鼠标指针位置相对于触发事件的对象的 x 坐标。 （触发事件的元素,ie,chrome支持此属性，ff不支持）<br>event.offsetY 设置或获取鼠标指针位置相对于触发事件的对象的 y 坐标。 （触发事件的元素,ie,chrome支持此属性，ff不支持）<br>event.screenX 设置或获取获取鼠标指针位置相对于用户屏幕的 x 坐标。(用户屏幕左上角)<br>event.screenY 设置或获取鼠标指针位置相对于用户屏幕的 y 坐标。 (用户屏幕左上角)<br>event.x 设置或获取鼠标指针位置相对于父文档的 x 像素坐标(亦即相对于当前窗口)。(ff不支持)<br>event.y 设置或获取鼠标指针位置相对于父文档的 y 像素坐标(亦即相对于当前窗口)。(ff不支持)       event.layerX 鼠标相比较于当前坐标系的位置,即如果触发元素没有设置绝对定位或相对定位,以页面为参考点,如果有,将改变参考坐标系,从触发元素盒子模型的border区域的左上角为参考点(未理解)                      event.laylerY 鼠标相比较于当前坐标系的位置,即如果触发元素没有设置绝对定位或相对定位,以页面为参考点,如果有,将改变参考坐标系,从触发元素盒子模型的border区域的左上角为参考点(未理解)                event.pageX 设置或获取鼠标指针位置相对于当前窗口的 x 坐标，其中客户区域包括窗口自身的控件和滚动条。                                                                                                                                                                     event.pageY 设置或获取鼠标指针位置相对于当前窗口的 y 坐标，其中客户区域包括窗口自身的控件和滚动条。 </p>
</blockquote>
<h3 id="事件相关"><a href="#事件相关" class="headerlink" title="事件相关"></a>事件相关</h3><p>不是所有的事件都可以事件冒泡，DOM 中事件对象上的 bubbles 指示事件是否是冒泡事件类型，abort、blur、focus、load、mouseenter、mouseleave、resize、upload 等事件都不会冒泡。h5中定义的新事件：<a href="https://html.spec.whatwg.org/multipage/media.html#mediaevents" target="_blank" rel="noopener">meida 相关事件</a>都不冒泡、drag 相关事件（dragstart、drag、dragenter…）均冒泡、history 相关事件（popstate、hashchange 冒泡），pagetransition 事件（用户导航到网页和远离网页时发生的事件）不冒泡</p>
<p>事件冒泡的作用：</p>
<ul>
<li>允许多个操作被集中处理（事件委托），可以在对象层的不同级别捕获事件</li>
<li>让不同对象同时捕获同一事件，并调用自己专属处理程序处理</li>
</ul>
<p>事件委托的优缺点：</p>
<ul>
<li>优点<ul>
<li>减少事件注册，节省内存</li>
<li>简化 dom 节点更新时相应事件的更新（如不用在新添加的 dom 元素上绑定事件或者删除 dom 元素时解绑上面绑定的事件）</li>
</ul>
</li>
<li>缺点<ul>
<li>事件委托基于冒泡，对于不冒泡的事件不支持</li>
<li>事件冒泡可能在某层会被阻止掉</li>
<li>理论上委托会导致浏览器频繁调用处理函数，故需要就近委托（而不是 document 上）</li>
<li>可能会出现事件误判，如代码上不能明显看出，可能会进行不必要的处理（如 document 上代理，但对代码不熟悉可能会另行添加处理函数）</li>
</ul>
</li>
</ul>
<p>事件穿透（移动端）：</p>
<ul>
<li><p>原因：移动端双击缩放会有 300 ms 延迟（延迟 300 ms 判断用户是否再次点击了屏幕），来判断是想要进行点击还是双击缩放</p>
</li>
<li><p>场景：</p>
<ul>
<li>蒙层穿透：蒙层绑定 touch 事件，touch 事件触发后蒙层消失，而被蒙层覆盖元素绑定了 click 或 tap（只要这个事件有延迟都会发生），300 ms 后由于蒙层消失 click 事件就落到了被覆盖的元素上</li>
<li>跨页面点击穿透：即蒙层穿透中被蒙层覆盖的元素没有绑定 click ，而是一个 a 连接（或 input 输入框），也会发生穿透</li>
</ul>
</li>
<li><p>解决方法：</p>
<ul>
<li><p>遮挡</p>
<p>蒙层穿透主要原因是 click 事件是延迟了 300 ms 触发的，故可以给蒙层消失做一个动画淡出效果并设置动画时长大于 300 ms。</p>
</li>
<li><p>pointer-events</p>
<ul>
<li>auto：鼠标不会穿透当前层（和没有定义这个属性效果相同）</li>
<li>none：元素不再是鼠标事件的目标，鼠标不再监听当前层而去监听当前层下层元素</li>
</ul>
<p>故解决穿透就只需要在触发点击消除时将下层元素的 pointer-events 设置为 none，并在延迟一段时间后（大于 300ms）将其改回 auto</p>
</li>
<li><p>fastclick 库：实现思路是取消 click 事件，用 touchend 模拟快速点击行为</p>
</li>
</ul>
</li>
</ul>
<blockquote>
<p>移动端 touch 事件： </p>
<ul>
<li><p>pc 上的鼠标事件包括 mousedown、mouseup、mousemove、click，一次点击事件的触发过程是 mousedown -&gt; mouseup -&gt; click</p>
</li>
<li><p>移动端用触摸事件实现类似功能，touch 事件包括 touchstart、touchmove、touchend，手指触发触摸事件过程为 touchstart -&gt; touchmove -&gt; touchend</p>
<p>移动端的 tap 事件不是原生事件，是封装得来。tap 事件触发条件：没有移动、按住的时间没有超过特定时间（如 200 ms）</p>
<p>移动端的touch为什么可以触发 click 事件？</p>
<p>移动端响应 click 相关事件会有 300 ms 左右延迟，如 mousedown、mouseclick、mouseup，实际上是移动端浏览器在 touchend 后会等待 300 ms 来判断有没有进行双击行为，如果没有则触发 click 事件。</p>
</li>
</ul>
<p><a href="https://segmentfault.com/a/1190000003848737" target="_blank" rel="noopener">参考</a></p>
</blockquote>
<h3 id="多异步网络请求串联"><a href="#多异步网络请求串联" class="headerlink" title="多异步网络请求串联"></a>多异步网络请求串联</h3><ul>
<li>promise then 链式（then 方法返回的是一个新的 Promise 实例）</li>
<li>es6 async/await 方法（await 后跟一个 promise 对象）</li>
</ul>
<p>eg：给一个存放 url 的数组，要求按序请求资源，用 fetch。关键词 map、promise、reduce</p>
<pre class=" language-js"><code class="language-js"><span class="token keyword">var</span> urls <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
urls<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span>acc<span class="token punctuation">,</span> cur<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> acc<span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>value <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token function">fetch</span><span class="token punctuation">(</span>cur<span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">,</span> e <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span> <span class="token keyword">throw</span> e <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span>resolve<span class="token punctuation">,</span> reject<span class="token punctuation">)</span><span class="token operator">=</span><span class="token operator">></span><span class="token punctuation">{</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
</code></pre>
<h3 id="try-catch"><a href="#try-catch" class="headerlink" title="try catch"></a>try catch</h3><p>try catch 不能捕获异步方法中抛出的错误，即 try catch 能捕获的异常必须是<strong>线程执行已经进入 try catch 但 try catch 未执行完的时候抛出的</strong>，如在 try 中定义函数，但在 try catch 外执行函数、setTimeout 中定义的函数。另外 Promise 的异常在执行回调中都用 try catch 报过了，并未往上抛异常</p>
<h3 id="正则表达式"><a href="#正则表达式" class="headerlink" title="正则表达式"></a>正则表达式</h3><ul>
<li><code>[]</code> 表示字符集，匹配括号中的任意字符，可以用<code>-</code>来指定范围</li>
<li><code>{n,m}</code>匹配前面的字符至少 n 次，最多 m 次。变体<code>{n,}</code>至少 n 次，<code>{n}</code>刚好 n 次</li>
<li><code>x(?=y)</code>，先行断言，匹配 x 仅仅当 x 后是 y；<code>(?&lt;=y)x</code>，后行断言，匹配 x 仅仅当 x前面是 y；</li>
<li><code>x(?!y)</code>，正向否定查找，仅仅当 x 后面不是y；<code>(?&lt;!y)x</code>，反向否定查找，匹配x仅当 x 前面不是y</li>
<li>replace 方法中引入正则，传入回调函数的参数（正则中的括号捕获）</li>
</ul>
<blockquote>
<p><a href="https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Regular_Expressions" target="_blank" rel="noopener">参考 mdn</a></p>
</blockquote>
<h3 id="js-中跨域问题"><a href="#js-中跨域问题" class="headerlink" title="js 中跨域问题"></a>js 中跨域问题</h3><p>主要考察 cors 和 服务器代理，了解 jsonp 和 其他不同窗口之间的跨域通信</p>
<p>详情见<a href="https://huangrenhao.gitee.io/2019/04/07/browser-cross-domain/">跨域及解决方法</a></p>
<h3 id="js-中节流防抖区别与应用场景"><a href="#js-中节流防抖区别与应用场景" class="headerlink" title="js 中节流防抖区别与应用场景"></a>js 中节流防抖区别与应用场景</h3><p>详情见 <a href="https://huangrenhao.gitee.io/2019/04/01/js-throttle/">函数节流和防抖</a></p>
<h3 id="es6-新特性"><a href="#es6-新特性" class="headerlink" title="es6 新特性"></a>es6 新特性</h3><p>主要考察 map、weakmap、set、weakset，async/await，可以参考<a href="https://es6.ruanyifeng.com/" target="_blank" rel="noopener">阮一峰 es6 入门教程</a></p>
<h3 id="js-中的垃圾收集机制"><a href="#js-中的垃圾收集机制" class="headerlink" title="js 中的垃圾收集机制"></a>js 中的垃圾收集机制</h3><p>详情见 <a href="https://huangrenhao.gitee.io/2019/11/04/js-gabage-collect/">垃圾收集</a></p>
<h3 id="cookie-、session、token、storage-和-worker"><a href="#cookie-、session、token、storage-和-worker" class="headerlink" title="cookie 、session、token、storage 和 worker"></a>cookie 、session、token、storage 和 worker</h3><p>详情见 <a href="https://huangrenhao.gitee.io/2019/11/10/browser-cookie-storage/">js 中的数据存储</a></p>
<h3 id="js-中的事件循环和宏-微任务"><a href="#js-中的事件循环和宏-微任务" class="headerlink" title="js 中的事件循环和宏/微任务"></a>js 中的事件循环和宏/微任务</h3><p>详情见 <a href="https://huangrenhao.gitee.io/2019/11/07/js-event-loop/">事件循环</a>，<a href="https://huangrenhao.gitee.io/2019/11/06/js-tasks-microtasks/">宏/微任务</a></p>
<h3 id="js-中的模块化"><a href="#js-中的模块化" class="headerlink" title="js 中的模块化"></a>js 中的模块化</h3><p>详情见 <a href="https://huangrenhao.gitee.io/2018/11/28/js-qian-duan-mo-kuai-hua-commonjs-amd-cmd-es6/">前端模块化： commonjs、amd、es6</a></p>
<h2 id="安全问题（常考-xss-和-csrf）"><a href="#安全问题（常考-xss-和-csrf）" class="headerlink" title="安全问题（常考 xss 和 csrf）"></a>安全问题（常考 xss 和 csrf）</h2><h3 id="XSS"><a href="#XSS" class="headerlink" title="XSS"></a>XSS</h3><p><strong>跨站脚本攻击</strong>（英语：Cross-site scripting，通常简称为：XSS）</p>
<p>XSS 攻击是指攻击者在网站上注入恶意的客户端代码，通过恶意脚本对客户端网页进行篡改，从而在用户浏览网页时，对用户浏览器进行控制或者获取用户隐私数据的一种攻击方式。</p>
<p>攻击者对客户端网页注入的恶意脚本一般包括 JavaScript，有时也会包含 HTML 和 Flash。有很多种方式进行 XSS 攻击，但它们的共同点为：<strong>将一些隐私数据像 cookie、session 发送给攻击者</strong>，将受害者重定向到一个由攻击者控制的网站，在受害者的机器上进行一些恶意操作。</p>
<p>XSS攻击可以分为3类：反射型（非持久型）、存储型（持久型）、基于DOM</p>
<ul>
<li>反射型：把用户输入的数据 “反射” 给浏览器，这种攻击方式往往需要攻击者诱使用户点击一个恶意链接，或者提交一个表单，或者进入一个恶意网站时，注入脚本进入被攻击者的网站。攻击者可以注入任意的恶意脚本进行攻击，可能注入恶作剧脚本，或者注入能获取用户隐私数据(如cookie)的脚本，这取决于攻击者的目的。<strong>所谓反射型XSS就是将用户输入的数据（恶意用户输入的js脚本），“反射”到浏览器执行。</strong></li>
<li>存储型：把<strong>用户输入的数据 “存储” 在服务器端，当浏览器请求数据时，脚本从服务器上传回并执行</strong>。这种 XSS 攻击具有很强的稳定性。比较常见的一个场景是攻击者在社区或论坛上写下一篇包含恶意 JavaScript 代码的文章或评论，文章或评论发表后，所有访问该文章或评论的用户，都会在他们的浏览器中执行这段恶意的 JavaScript 代码。</li>
<li>基于 DOM ：指通过恶意脚本修改页面的 DOM 结构，是纯粹发生在客户端的攻击。</li>
</ul>
<h4 id="实例："><a href="#实例：" class="headerlink" title="实例："></a>实例：</h4><p>xss 中主要目的是想办法获取目标攻击网站的 cookie，有了 cookie 就可以以他人身份登录。主要的做法是诱使用户点击连接或者打开某个页面，这个页面中会带有恶意代码（如图片、链接、js 代码等），如发送 get 请求到指定连接中，其中这个连接上带上 <code>document.cookie</code>作为参数，这样恶意站点就可以通过 get  参数拿到用户的 cookie。</p>
<p><strong>具体实现</strong>：比如说动态处理的 script 中存在 <strong>setAttribute(‘src’, ‘<a href="http://xxx.js&#39;" target="_blank" rel="noopener">http://xxx.js&#39;</a>)</strong>，就会请求恶意代码，或者是 <strong>innerHtml</strong></p>
<blockquote>
<p>实例：</p>
<ul>
<li>反射型： 用户输入查询，服务端返回中将查询字段插入 html 中，这样用户输入 html script 代码就会执行</li>
<li>持久型：攻击者在留言中增加一段代码，而留言输入框恰好将输入当做 innerHtml 插入。。</li>
</ul>
</blockquote>
<h4 id="防范："><a href="#防范：" class="headerlink" title="防范："></a>防范：</h4><ul>
<li><p><strong>httpOnly</strong> 防止截取 cookie</p>
<p>httpOnly 的缺点？</p>
</li>
<li><p><strong>输入检查</strong>：不要相信用户的任何输入。对用户的任何输入要进行检查、过滤和转义。建立可信任的字符和 HTML 标签白名单，对于不在白名单之列的字符或者标签进行过滤或编码。在 XSS 防御中，输入检查一般是检查用户输入的数据中是否包含 <code>&lt;</code>，<code>&gt;</code> 等特殊字符，如果存在，则对特殊字符进行过滤或编码，这种方式也称为 XSS Filter。</p>
</li>
<li><p><strong>输出检查</strong>：服务端的输出也会存在问题。一般来说，除富文本的输出外，在变量输出到 HTML 页面时，可以使用编码或转义的方式来防御 XSS 攻击</p>
</li>
</ul>
<h3 id="csrf"><a href="#csrf" class="headerlink" title="csrf"></a>csrf</h3><p>CSRF，即 Cross Site Request Forgery，中译是跨站请求伪造，是一种劫持受信任用户向服务器发送非预期请求的攻击方式。</p>
<p>通常情况下，CSRF 攻击是攻击者借助受害者的 Cookie 骗取服务器的信任，可以在受害者毫不知情的情况下以受害者名义伪造请求发送给受攻击服务器，从而在并未授权的情况下执行在权限保护之下的操作。比如说假设网站中有一个通过 Get 请求提交用户评论的接口，那么攻击者就可以在钓鱼网站中加入一个图片，图片的地址就是评论接口。</p>
<h4 id="实例"><a href="#实例" class="headerlink" title="实例"></a>实例</h4><p>csrf 主要目的是让用户在不知情的情况下攻击自己已登录的一个系统（类似钓鱼），如用户当前已经登录了邮箱或bbs，此时用户还在使用一个被控制的站点（钓鱼网站），这个网站上可能某个图片点击之后就会触发 js 点击事件：构造 bbs 发帖的请求，去 bbs 发帖，由于当前浏览器状态时已登录状态，这个伪造的请求会和正常的请求相同，利用当前的登录状态，让用户在不知情的情况帮你发帖或干其他事。</p>
<h4 id="防范：-1"><a href="#防范：-1" class="headerlink" title="防范："></a>防范：</h4><ul>
<li><p>验证码：CSRF 攻击往往是在用户不知情的情况下构造了网络请求。而验证码会强制用户必须与应用进行交互，才能完成最终请求</p>
</li>
<li><p>禁止第三方网站携带本站的 cookie 信息，让服务器返回 Set-Cookie 字段中带上 <strong>SameSite</strong> 特定值，</p>
<blockquote>
<p>SameSite可以是：</p>
<ul>
<li>Strict：完全禁止第三方 cookie，只有当前网页URL与请求目标一致才会带上 cookie。（过于严格，如 github 连接跳转后不会自动登录）</li>
<li>Lax：只有导航到目标网址的 get 请求可以带上 cookie，包括三种情况：<ul>
<li>a 标签，<code>&lt;a href=&quot;...&quot;&gt;&lt;/a&gt;</code></li>
<li>预加载请求，<code>&lt;link re=&quot;prerender&quot; href=&quot;...&quot;/&gt;</code></li>
<li>get 表单，<code>&lt;form method=&quot;GET&quot; action=&quot;...&quot;/&gt;</code></li>
</ul>
</li>
<li>None：显式关闭 SameSite（因为浏览器可能会默认 Lax），前提是 Set-Cookie 中需要带上 Secure（cookie 只能通过 https 发送）</li>
</ul>
<p><a href="http://www.ruanyifeng.com/blog/2019/09/cookie-samesite.html" target="_blank" rel="noopener">参考 阮一峰 Cookie 的 SameSite 属性</a></p>
</blockquote>
</li>
<li><p><strong>Referer check</strong>：根据 HTTP 协议，在 HTTP 头中有一个字段叫 Referer，它记录了该 HTTP 请求的来源地址。通过 Referer Check，可以检查请求是否来自合法的”源”。比如，如果用户要删除自己的帖子，那么先要登录 <code>www.c.com</code>，然后找到对应的页面，发起删除帖子的请求。此时，Referer 的值是 <code>http://www.c.com</code>；当请求是从 <code>www.a.com</code> 发起时，Referer 的值是 <code>http://www.a.com</code> 了。因此，要防御 CSRF 攻击，只需要对于每一个删帖请求验证其 Referer 值，如果是以 <code>www.c.com</code> 开头的域名，则说明该请求是来自网站自己的请求，是合法的。如果 Referer 是其他网站的话，则有可能是 CSRF 攻击，可以拒绝该请求。</p>
<blockquote>
<p>referer、origin、host</p>
<p>host：客户端想访问的 web 服务器的域名/ip 地址和端口号</p>
<p>origin：说明请求从哪里发起，仅仅包括协议和域名</p>
<p>referer：包括协议、域名和查询参数（不包含锚点信息），可能会造成信息泄露（查询参数中可能包含id 或密码等）</p>
</blockquote>
</li>
<li><p><strong>添加 token 验证</strong>：CSRF 攻击之所以能够成功，是因为攻击者可以完全伪造用户的请求，该请求中所有的用户验证信息都是存在于 Cookie 中，因此攻击者可以在不知道这些验证信息的情况下直接利用用户自己的 Cookie 来通过安全验证。要抵御 CSRF，关键在于在请求中放入攻击者所不能伪造的信息，并且该信息不存在于 Cookie 之中。可以在 HTTP 请求中以参数的形式加入一个随机产生的 token，并在服务器端建立一个拦截器来验证这个 token，如果请求中没有 token 或者 token 内容不正确，则认为可能是 CSRF 攻击而拒绝该请求。token 也可以放在当前页面中（如表单中 input 的隐藏域、meta 标签或者任何 一个 dom 属性）和 cookie中，请求的时候参数中带上这个 token，后端将参数中的 token 和 cookie 中的 token 对比来判断是否合法</p>
</li>
</ul>
<p>方法优缺点：验证码需要用户填写，增加了网站使用复杂度，token 验证可以在用户无感的情况下完成，不影响用户体验。故验证码一般用在需要提高用户认知的场景（如多次登录失败、修改个人信息），而一些常见接口（如获取商品列表、搜索）使用 token 较合理</p>
<h3 id="sql-注入"><a href="#sql-注入" class="headerlink" title="sql 注入"></a>sql 注入</h3><p>SQL注入攻击指的是通过构建特殊的输入作为参数传入Web应用程序，而这些输入大都是SQL语法里的一些组合，通过执行SQL语句进而执行攻击者所要的操作，其主要原因是程序没有细致地过滤用户输入的数据，致使非法数据侵入系统。</p>
<h4 id="防护"><a href="#防护" class="headerlink" title="防护"></a>防护</h4><ul>
<li>永远不要信任用户的输入。对用户的输入进行校验，可以通过正则表达式，或限制长度；对单引号和双”-“进行转换等。</li>
<li>永远不要使用动态拼装sql，可以使用参数化的sql或者直接使用存储过程进行数据查询存取。</li>
<li>永远不要使用管理员权限的数据库连接，为每个应用使用单独的权限有限的数据库连接。</li>
<li>不要把机密信息直接存放，加密或者hash掉密码和敏感的信息。</li>
<li>应用的异常信息应该给出尽可能少的提示，最好使用自定义的错误信息对原始错误信息进行包装。</li>
</ul>
<h3 id="主动攻击和被动攻击"><a href="#主动攻击和被动攻击" class="headerlink" title="主动攻击和被动攻击"></a>主动攻击和被动攻击</h3><ul>
<li>主动攻击是具有破坏性的一种攻击行为，攻击者主动做一些不利于受害人的事情。按照攻击方法不同，主动攻击可以分为中断、篡改和伪造。<ul>
<li>中断是指截获由原站发送的数据，将有效数据中断，使目的站无法接收到原站发送的数据；</li>
<li>篡改是指将原站发送的目的站的数据进行篡改，从而影响目的站所受的的信息；</li>
<li>伪造是指在原站未发送数据的情况下，伪造数据发送的目的站，从而影响目的站。</li>
</ul>
</li>
<li>被动攻击是在不影响正常数据通信的情况下，获取由源站发送的目的站的有效数据，通过监听网络造成间接影响，不会对传输造成直接影响，难以监测。</li>
</ul>
<blockquote>
<p>参考资源：</p>
<ol>
<li><a href="https://yuchengkai.cn/docs/frontend" target="_blank" rel="noopener">前端进阶之道</a></li>
<li><a href="https://juejin.im/entry/5b4b56fd5188251b1a7b2ac1" target="_blank" rel="noopener">浅说xss和csrf</a></li>
</ol>
</blockquote>
<h2 id="看代码说输出"><a href="#看代码说输出" class="headerlink" title="看代码说输出"></a>看代码说输出</h2><p>涉及变量预解析、暂时性变量死区、闭包、promise、this、事件循环、宏任务微任务</p>
<pre class=" language-js"><code class="language-js"><span class="token function">setTimeout</span><span class="token punctuation">(</span>_ <span class="token operator">=</span><span class="token operator">></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
<span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span>resolve <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
  <span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>_ <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
  <span class="token function">setTimeout</span><span class="token punctuation">(</span>_ <span class="token operator">=</span><span class="token operator">></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">)</span>
  Promise<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>_ <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>_ <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    Promise<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>_ <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">6</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">7</span><span class="token punctuation">)</span>
</code></pre>
<pre class=" language-js"><code class="language-js"><span class="token keyword">function</span> <span class="token function">Foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>a <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
  <span class="token keyword">return</span> <span class="token punctuation">{</span>
    a<span class="token punctuation">:</span> <span class="token number">4</span><span class="token punctuation">,</span>
    b<span class="token punctuation">:</span> <span class="token number">5</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
Foo<span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>a <span class="token operator">=</span> <span class="token number">6</span><span class="token punctuation">;</span>
Foo<span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>b <span class="token operator">=</span> <span class="token number">7</span><span class="token punctuation">;</span>
Foo<span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>c <span class="token operator">=</span> <span class="token number">8</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> o <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Foo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>o<span class="token punctuation">.</span>a<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>o<span class="token punctuation">.</span>b<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>o<span class="token punctuation">.</span>c<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<pre class=" language-js"><code class="language-js"><span class="token punctuation">(</span><span class="token keyword">async</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
  <span class="token keyword">await</span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">4</span><span class="token punctuation">)</span>
<span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token number">5</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token number">0</span><span class="token punctuation">)</span>
<span class="token comment" spellcheck="true">// 2 3 的顺序？</span>
</code></pre>
<pre class=" language-js"><code class="language-js"><span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token number">1</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> foo <span class="token operator">=</span> <span class="token punctuation">{</span>
    a<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
    bar<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>a<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>foo<span class="token punctuation">.</span><span class="token function">bar</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token punctuation">(</span>foo<span class="token punctuation">.</span>bar<span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token punctuation">(</span>foo<span class="token punctuation">.</span>bar<span class="token operator">=</span>foo<span class="token punctuation">.</span>bar<span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<pre class=" language-js"><code class="language-js"><span class="token keyword">function</span> <span class="token function">fun</span><span class="token punctuation">(</span>n<span class="token punctuation">,</span>o<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>o<span class="token punctuation">)</span>
  <span class="token keyword">return</span> <span class="token punctuation">{</span>
    fun<span class="token punctuation">:</span><span class="token keyword">function</span><span class="token punctuation">(</span>m<span class="token punctuation">)</span><span class="token punctuation">{</span>
      <span class="token keyword">return</span> <span class="token function">fun</span><span class="token punctuation">(</span>m<span class="token punctuation">,</span>n<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token function">fun</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  a<span class="token punctuation">.</span><span class="token function">fun</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  a<span class="token punctuation">.</span><span class="token function">fun</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  a<span class="token punctuation">.</span><span class="token function">fun</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> b <span class="token operator">=</span> <span class="token function">fun</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">fun</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">fun</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">fun</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> c <span class="token operator">=</span> <span class="token function">fun</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">fun</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  c<span class="token punctuation">.</span><span class="token function">fun</span><span class="token punctuation">(</span><span class="token number">2</span><span class="token punctuation">)</span><span class="token punctuation">;</span>  c<span class="token punctuation">.</span><span class="token function">fun</span><span class="token punctuation">(</span><span class="token number">3</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment" spellcheck="true">//问:三行a,b,c的输出分别是什么？</span>
</code></pre>
<pre class=" language-js"><code class="language-js"><span class="token keyword">var</span> a <span class="token operator">=</span> <span class="token number">10</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> obj <span class="token operator">=</span> <span class="token punctuation">{</span>
    a<span class="token punctuation">:</span><span class="token number">20</span><span class="token punctuation">,</span>
    say<span class="token punctuation">:</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=</span><span class="token operator">></span><span class="token punctuation">{</span>
        console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>a<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">var</span> objTemp <span class="token operator">=</span> <span class="token punctuation">{</span>
      a<span class="token punctuation">:</span><span class="token number">20</span><span class="token punctuation">,</span>
    say<span class="token punctuation">:</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>a<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
obj<span class="token punctuation">.</span><span class="token function">say</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">var</span> obj2 <span class="token operator">=</span> <span class="token punctuation">{</span>a<span class="token punctuation">:</span><span class="token number">30</span><span class="token punctuation">}</span>
obj<span class="token punctuation">.</span>say<span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span>obj2<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment" spellcheck="true">// obj 对象不能产生作用域，箭头函数中的 this 始终指向其父作用域中的 this</span>
objTemp<span class="token punctuation">.</span><span class="token function">say</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
objTemp<span class="token punctuation">.</span>say<span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span>obj2<span class="token punctuation">)</span>
</code></pre>
<pre class=" language-js"><code class="language-js"><span class="token keyword">function</span> fun <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
                                console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token punctuation">)</span>
                    <span class="token punctuation">}</span>
                <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">var</span> f <span class="token operator">=</span> fun<span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token punctuation">{</span>name<span class="token punctuation">:</span> <span class="token string">'foo'</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token keyword">var</span> t1 <span class="token operator">=</span> f<span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token punctuation">{</span>name<span class="token punctuation">:</span> <span class="token string">'bar'</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token keyword">var</span> t2 <span class="token operator">=</span> <span class="token function">f</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token punctuation">{</span>name<span class="token punctuation">:</span> <span class="token string">'baz'</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token keyword">var</span> t3 <span class="token operator">=</span> <span class="token function">f</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token punctuation">{</span>name<span class="token punctuation">:</span> <span class="token string">'qux'</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre>
<pre class=" language-js"><code class="language-js"><span class="token keyword">var</span> name <span class="token operator">=</span> <span class="token string">'global'</span><span class="token punctuation">;</span>
<span class="token keyword">function</span> <span class="token function">Person</span><span class="token punctuation">(</span>name<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>name  <span class="token operator">=</span> name<span class="token punctuation">;</span>
  <span class="token keyword">this</span><span class="token punctuation">.</span>sayName <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token keyword">const</span> personA <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Person</span><span class="token punctuation">(</span><span class="token string">'aaa'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token keyword">const</span> personB <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Person</span><span class="token punctuation">(</span><span class="token string">'bbb'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
personA<span class="token punctuation">.</span><span class="token function">sayName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
personB<span class="token punctuation">.</span><span class="token function">sayName</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
<h2 id="手写常见-js-题"><a href="#手写常见-js-题" class="headerlink" title="手写常见 js 题"></a>手写常见 js 题</h2><h3 id="闭包"><a href="#闭包" class="headerlink" title="闭包"></a>闭包</h3><ul>
<li><p>函数柯里化</p>
<pre class=" language-js"><code class="language-js"><span class="token keyword">function</span> <span class="token function">curryIt</span><span class="token punctuation">(</span>fn<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> length <span class="token operator">=</span> fn<span class="token punctuation">.</span>length<span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// 函数的显式参数长度</span>
    <span class="token keyword">var</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> result <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        arr <span class="token operator">=</span> arr<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span><span class="token operator">...</span>arguments<span class="token punctuation">)</span>
        <span class="token keyword">if</span><span class="token punctuation">(</span>arr<span class="token punctuation">.</span>length <span class="token operator">&lt;</span> length<span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token keyword">return</span> result<span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token keyword">else</span><span class="token punctuation">{</span>
            <span class="token keyword">return</span> fn<span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">,</span>arr<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> result<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">add</span><span class="token punctuation">(</span>x<span class="token punctuation">,</span>y<span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token keyword">return</span> x<span class="token operator">+</span>y<span class="token punctuation">;</span><span class="token punctuation">}</span>
</code></pre>
</li>
<li><p>函数节流、防抖</p>
<pre class=" language-js"><code class="language-js"><span class="token comment" spellcheck="true">// 防抖</span>
<span class="token keyword">function</span> <span class="token function">debounce</span><span class="token punctuation">(</span>method<span class="token punctuation">,</span> context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token function">clearTimeout</span><span class="token punctuation">(</span>method<span class="token punctuation">.</span>tId<span class="token punctuation">)</span><span class="token punctuation">;</span>
    method<span class="token punctuation">.</span>tId <span class="token operator">=</span> <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      method<span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>context<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1000</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment" spellcheck="true">// 节流</span>
<span class="token keyword">function</span> <span class="token function">throttle</span><span class="token punctuation">(</span>fn<span class="token punctuation">,</span> interval <span class="token operator">=</span> <span class="token number">300</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">let</span> canRun <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>canRun<span class="token punctuation">)</span> <span class="token keyword">return</span><span class="token punctuation">;</span>
        canRun <span class="token operator">=</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
        <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
            fn<span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">,</span> arguments<span class="token punctuation">)</span><span class="token punctuation">;</span>
            canRun <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span> interval<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
</li>
<li><p>bind 方法</p>
<pre class=" language-js"><code class="language-js">Function<span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>mybind <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> <span class="token keyword">this</span> <span class="token operator">!=</span> <span class="token string">'function'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">throw</span> <span class="token function">TypeError</span><span class="token punctuation">(</span><span class="token string">'error'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">var</span> _this <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> args <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span>arguments<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment" spellcheck="true">// bind 调用有函数柯里化的形式 bind(this,...arg)(...arg) 即返回一个函数，函数也可接受参数</span>
    <span class="token keyword">return</span> <span class="token keyword">function</span> <span class="token function">F</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">this</span> <span class="token keyword">instanceof</span> <span class="token class-name">F</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">_this</span><span class="token punctuation">(</span><span class="token operator">...</span>args<span class="token punctuation">,</span> <span class="token operator">...</span>arguments<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
            <span class="token keyword">return</span> _this<span class="token punctuation">.</span><span class="token function">apply</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span> args<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span><span class="token operator">...</span>arguments<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
<p>call、apply 方法也在考察范围之内（少见）</p>
<pre class=" language-js"><code class="language-js">Function<span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>mycall <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> context <span class="token operator">=</span> context <span class="token operator">||</span> window<span class="token punctuation">;</span>
    context<span class="token punctuation">.</span>fn <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> args <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token operator">...</span>arguments<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> result <span class="token operator">=</span> context<span class="token punctuation">.</span><span class="token function">fn</span><span class="token punctuation">(</span><span class="token operator">...</span>args<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">delete</span> context<span class="token punctuation">.</span>fn<span class="token punctuation">;</span>
    <span class="token keyword">return</span> result<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
Function<span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>myapply <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> context <span class="token operator">=</span> context <span class="token operator">||</span> window<span class="token punctuation">;</span>
    <span class="token keyword">var</span> result<span class="token punctuation">;</span>
    context<span class="token punctuation">.</span>fn <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">;</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>arguments<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        result <span class="token operator">=</span> context<span class="token punctuation">.</span><span class="token function">fn</span><span class="token punctuation">(</span><span class="token operator">...</span>arguments<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
        result <span class="token operator">=</span> context<span class="token punctuation">.</span><span class="token function">fn</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">delete</span> context<span class="token punctuation">.</span>fn<span class="token punctuation">;</span>
    <span class="token keyword">return</span> result
<span class="token punctuation">}</span>
</code></pre>
</li>
</ul>
<h3 id="promise-相关"><a href="#promise-相关" class="headerlink" title="promise 相关"></a>promise 相关</h3><ul>
<li><p>promise 中 all 方法</p>
<pre class=" language-js"><code class="language-js">MyPromise<span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>all <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span>proms<span class="token punctuation">)</span><span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">MyPromise</span><span class="token punctuation">(</span><span class="token punctuation">(</span>resolve<span class="token punctuation">,</span>reject<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> result <span class="token operator">=</span> proms<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>p <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
      <span class="token keyword">var</span> flag <span class="token operator">=</span> <span class="token punctuation">{</span>
        result<span class="token punctuation">:</span> undefined<span class="token punctuation">,</span>
        isResolved<span class="token punctuation">:</span> <span class="token boolean">false</span>
      <span class="token punctuation">}</span><span class="token punctuation">;</span>
      p<span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>val <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
        flag<span class="token punctuation">.</span>result <span class="token operator">=</span> val<span class="token punctuation">;</span>
        flag<span class="token punctuation">.</span>isResolved <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
        <span class="token keyword">var</span> isFinished <span class="token operator">=</span> result<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>r <span class="token operator">=</span><span class="token operator">></span> <span class="token operator">!</span>r<span class="token punctuation">.</span>isResolved<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">if</span><span class="token punctuation">(</span>isFinished<span class="token punctuation">.</span>length <span class="token operator">==</span> <span class="token number">0</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
          <span class="token function">resolve</span><span class="token punctuation">(</span>result<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>r <span class="token operator">=</span><span class="token operator">></span> r<span class="token punctuation">.</span>result<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span> error <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
        <span class="token function">reject</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token keyword">return</span> flag<span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre>
</li>
<li><p>promise 中 race 方法</p>
<pre class=" language-js"><code class="language-js">MyPromise<span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>race <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span>proms<span class="token punctuation">)</span><span class="token punctuation">{</span>
  <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span><span class="token punctuation">(</span><span class="token punctuation">(</span>resolve<span class="token punctuation">,</span>reject<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    proms<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span>p <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
      p<span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span>val <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
        <span class="token function">resolve</span><span class="token punctuation">(</span>val<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">,</span>error <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
        <span class="token function">reject</span><span class="token punctuation">(</span>error<span class="token punctuation">)</span><span class="token punctuation">;</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre>
</li>
<li><p>借助 promise 实现链式先后请求（带并发控制）</p>
<pre class=" language-js"><code class="language-js"><span class="token keyword">function</span> compositeWithPromise <span class="token punctuation">(</span>urlArr<span class="token punctuation">,</span> limit<span class="token punctuation">)</span> <span class="token punctuation">{</span>
  <span class="token keyword">function</span> _loadImg <span class="token punctuation">(</span>url<span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token comment" spellcheck="true">/*请求资源方法*/</span> <span class="token punctuation">}</span>
  <span class="token keyword">var</span> copyArr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>urlArr<span class="token punctuation">)</span>
  <span class="token keyword">var</span> pros <span class="token operator">=</span> copyArr<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> limit<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span>v<span class="token punctuation">,</span>i<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token function">_loadImg</span><span class="token punctuation">(</span>v<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span> <span class="token keyword">return</span> i <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span><span class="token punctuation">)</span>

  <span class="token keyword">var</span> p <span class="token operator">=</span> Promise<span class="token punctuation">.</span><span class="token function">race</span><span class="token punctuation">(</span>pros<span class="token punctuation">)</span>
  <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span> i<span class="token operator">&lt;</span>copyArr<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    p<span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span>index<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
      pros<span class="token punctuation">[</span>index<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">_loadImg</span><span class="token punctuation">(</span>copyArr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">then</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span> <span class="token keyword">return</span> index <span class="token punctuation">}</span><span class="token punctuation">)</span>
      <span class="token keyword">return</span> Promise<span class="token punctuation">.</span><span class="token function">race</span><span class="token punctuation">(</span>pros<span class="token punctuation">)</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
</li>
</ul>
<h3 id="继承、原型链相关"><a href="#继承、原型链相关" class="headerlink" title="继承、原型链相关"></a>继承、原型链相关</h3><ul>
<li><p>继承方法</p>
<pre class=" language-js"><code class="language-js"><span class="token keyword">function</span> <span class="token function">subType</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token keyword">function</span> superType <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token comment" spellcheck="true">// 原型链继承</span>
subType<span class="token punctuation">.</span>prototype <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">superType</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
subType<span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>constructor <span class="token operator">=</span> subType

<span class="token comment" spellcheck="true">// 组合继承</span>
<span class="token keyword">function</span> <span class="token function">subType</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
  superType<span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
subType<span class="token punctuation">.</span>prototype <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">superType</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
subType<span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>constructor <span class="token operator">=</span> subType

<span class="token comment" spellcheck="true">// 寄生组合式继承</span>
<span class="token comment" spellcheck="true">// Object.create</span>
<span class="token comment" spellcheck="true">// 对传入的对象进行了一次浅复制</span>
<span class="token keyword">function</span> <span class="token function">object</span><span class="token punctuation">(</span>o<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">function</span> <span class="token function">F</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span>
    F<span class="token punctuation">.</span>prototype <span class="token operator">=</span> o<span class="token punctuation">;</span>
    <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">F</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">inheritPrototype</span><span class="token punctuation">(</span>subType<span class="token punctuation">,</span> superType<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment" spellcheck="true">// 创建父类型原型副本</span>
    <span class="token keyword">var</span> prototype <span class="token operator">=</span> <span class="token function">object</span><span class="token punctuation">(</span>superType<span class="token punctuation">.</span>prototype<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// 创建对象</span>
    <span class="token comment" spellcheck="true">// 重写原型失去了默认的 constructor</span>
    prototype<span class="token punctuation">.</span>constructor <span class="token operator">=</span> subType<span class="token punctuation">;</span>  <span class="token comment" spellcheck="true">// 增强对象</span>
    subType<span class="token punctuation">.</span>prototype <span class="token operator">=</span> prototype<span class="token punctuation">;</span>  <span class="token comment" spellcheck="true">// 指定对象</span>
<span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">superType</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span> <span class="token punctuation">}</span>
<span class="token keyword">function</span> <span class="token function">subType</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    superType<span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token function">inheritPrototype</span><span class="token punctuation">(</span>subType<span class="token punctuation">,</span> superType<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre>
</li>
<li><p>new 操作符</p>
</li>
</ul>
<h3 id="数组相关-api"><a href="#数组相关-api" class="headerlink" title="数组相关 api"></a>数组相关 api</h3><ul>
<li><p>去重</p>
<pre class=" language-js"><code class="language-js"><span class="token keyword">function</span> <span class="token function">dedupe</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> arrSet <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Set</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> Array<span class="token punctuation">.</span><span class="token keyword">from</span><span class="token punctuation">(</span>arrSet<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token keyword">function</span> <span class="token function">dedupeC</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> res <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    arr <span class="token operator">&amp;&amp;</span> arr<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span>item <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>res<span class="token punctuation">.</span><span class="token function">includes</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            res<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> res<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment" spellcheck="true">// 数组中包含对象和数组，只能判断具有相同引用的对象</span>
<span class="token keyword">function</span> <span class="token function">dedupeCC</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> res <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> hash <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">;</span>
    arr <span class="token operator">&amp;&amp;</span> arr<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span>item <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>hash<span class="token punctuation">[</span>item<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            res<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">;</span>
            hash<span class="token punctuation">[</span>item<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token boolean">true</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">return</span> res<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
</li>
<li><p>扁平化</p>
<pre class=" language-js"><code class="language-js"><span class="token comment" spellcheck="true">// 1 api</span>
ary <span class="token operator">=</span> ary<span class="token punctuation">.</span><span class="token function">flat</span><span class="token punctuation">(</span><span class="token number">Infinity</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// 参数表示展开的深度</span>

<span class="token comment" spellcheck="true">// 2 字符串</span>
<span class="token comment" spellcheck="true">// 会把数字变为了字符串</span>
<span class="token keyword">let</span> str <span class="token operator">=</span> JSON<span class="token punctuation">.</span><span class="token function">stringify</span><span class="token punctuation">(</span>ary<span class="token punctuation">)</span><span class="token punctuation">;</span>
ary <span class="token operator">=</span> str<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex">/[\[\]]/g</span><span class="token punctuation">,</span><span class="token string">''</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">split</span><span class="token punctuation">(</span><span class="token string">','</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment" spellcheck="true">// 3 reduce + 递归</span>
<span class="token keyword">function</span> <span class="token function">myFlat</span><span class="token punctuation">(</span>arr<span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">return</span> arr<span class="token punctuation">.</span><span class="token function">reduce</span><span class="token punctuation">(</span><span class="token punctuation">(</span>acc<span class="token punctuation">,</span>cur<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
        <span class="token keyword">return</span> acc<span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span>Array<span class="token punctuation">.</span><span class="token function">isArray</span><span class="token punctuation">(</span>cur<span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token function">myFlat</span><span class="token punctuation">(</span>cur<span class="token punctuation">)</span> <span class="token punctuation">:</span> cur<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment" spellcheck="true">// 4 扩展运算符 </span>
<span class="token keyword">while</span><span class="token punctuation">(</span>ary<span class="token punctuation">.</span><span class="token function">some</span><span class="token punctuation">(</span>Array<span class="token punctuation">.</span>isArray<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    ary <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">concat</span><span class="token punctuation">(</span><span class="token operator">...</span>ary<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token comment" spellcheck="true">// 5 在原型上实现</span>
Array<span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>myFlat <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>count<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> arr <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">slice</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> res <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>count <span class="token operator">&lt;</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token keyword">return</span> arr
    <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span> i<span class="token operator">&lt;</span>arr<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token keyword">if</span> <span class="token punctuation">(</span>Array<span class="token punctuation">.</span><span class="token function">isArray</span><span class="token punctuation">(</span>arr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        res<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token operator">...</span>arr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span><span class="token function">myFlat</span><span class="token punctuation">(</span>count <span class="token operator">===</span> <span class="token number">Infinity</span> <span class="token operator">||</span> count <span class="token operator">===</span> undefined <span class="token operator">?</span> <span class="token number">Infinity</span> <span class="token punctuation">:</span> count<span class="token number">-1</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
        res<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>arr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> res
  <span class="token punctuation">}</span>
</code></pre>
</li>
<li><p>map</p>
<pre class=" language-js"><code class="language-js"><span class="token keyword">function</span> <span class="token function">myMap</span><span class="token punctuation">(</span>fn<span class="token punctuation">,</span>context<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">.</span>slice<span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">var</span> arrMap <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span> i<span class="token operator">&lt;</span>arr<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
        arrMap<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span>fn<span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>context<span class="token punctuation">,</span>arr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">,</span>i<span class="token punctuation">,</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> arrMap<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
</li>
<li><p>reduce</p>
<pre class=" language-js"><code class="language-js"><span class="token keyword">function</span> <span class="token function">myReduce</span><span class="token punctuation">(</span>fn<span class="token punctuation">,</span>initialValue<span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">var</span> arr <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">.</span>slice<span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>arguments<span class="token punctuation">.</span>length <span class="token operator">==</span> <span class="token number">2</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>   <span class="token comment" spellcheck="true">// 避免过滤掉传入的非法字符（0,undefined,...)</span>
        arr<span class="token punctuation">.</span><span class="token function">unshift</span><span class="token punctuation">(</span>initialValue<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment" spellcheck="true">// unshift 从头部添加，reduce 从左向右执行，从 initialValue 开始</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">var</span> res <span class="token operator">=</span> arr<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">;</span>
    <span class="token comment" spellcheck="true">// 注意 i 的起始位置</span>
    <span class="token keyword">for</span><span class="token punctuation">(</span><span class="token keyword">var</span> i<span class="token operator">=</span><span class="token number">1</span><span class="token punctuation">;</span> i<span class="token operator">&lt;</span>arr<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token comment" spellcheck="true">// if(!arr.hasOwnProperty(i)) {continue;}</span>
        res <span class="token operator">=</span> fn<span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span><span class="token keyword">null</span><span class="token punctuation">,</span>res<span class="token punctuation">,</span>arr<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">,</span>i<span class="token punctuation">,</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> res<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
</li>
</ul>
<h3 id="其他"><a href="#其他" class="headerlink" title="其他"></a>其他</h3><ul>
<li><p>深拷贝（递归与非递归）</p>
<pre class=" language-js"><code class="language-js"><span class="token keyword">function</span> depClone <span class="token punctuation">(</span>target<span class="token punctuation">,</span> map <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">WeakMap</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> target <span class="token operator">===</span> <span class="token string">'object'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>Object<span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>toString<span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>target<span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token string">'[object Null]'</span><span class="token punctuation">)</span> <span class="token keyword">return</span> <span class="token keyword">null</span>
        <span class="token keyword">var</span> res <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">target<span class="token punctuation">.</span>constructor</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>map<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span>target<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token keyword">return</span> target
        map<span class="token punctuation">.</span><span class="token keyword">set</span><span class="token punctuation">(</span>target<span class="token punctuation">,</span> res<span class="token punctuation">)</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>Object<span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>toString<span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>target<span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token string">'[object Set]'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> value <span class="token keyword">of</span> <span class="token keyword">set</span><span class="token punctuation">.</span><span class="token function">values</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                res<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token keyword">typeof</span> value <span class="token operator">===</span> <span class="token string">'object'</span><span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token function">depClone</span><span class="token punctuation">(</span>value<span class="token punctuation">)</span> <span class="token punctuation">:</span> value<span class="token punctuation">)</span>
            <span class="token punctuation">}</span>
            <span class="token keyword">return</span> res
        <span class="token punctuation">}</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>Object<span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>toString<span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>target<span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token string">'[object Map]'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> item <span class="token keyword">of</span> target<span class="token punctuation">.</span><span class="token function">entries</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token comment" spellcheck="true">// res.set((typeof item[0] === 'object') ? depClone(item[0]) : item[0], (typeof item[1] === 'object') ? depClone(item[1]) : item[1])</span>
                res<span class="token punctuation">.</span><span class="token keyword">set</span><span class="token punctuation">(</span>item<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> item<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span> <span class="token operator">===</span> <span class="token string">'object'</span><span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token function">depClone</span><span class="token punctuation">(</span>item<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">:</span> item<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
            <span class="token punctuation">}</span>
            <span class="token keyword">return</span> res
        <span class="token punctuation">}</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>Object<span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>toString<span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>target<span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token string">'[object RegExp]'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">var</span> regFlag <span class="token operator">=</span> <span class="token operator">/</span>\w<span class="token operator">*</span>$<span class="token operator">/</span> <span class="token comment" spellcheck="true">// 匹配结尾的 g i m（多行匹配）</span>
            res <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">target<span class="token punctuation">.</span>constructor</span><span class="token punctuation">(</span>target<span class="token punctuation">.</span>source<span class="token punctuation">,</span> regFlag<span class="token punctuation">.</span><span class="token function">exec</span><span class="token punctuation">(</span>target<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token comment" spellcheck="true">// 正则表达式原文本和属性</span>
            res<span class="token punctuation">.</span>lastIndex <span class="token operator">=</span> target<span class="token punctuation">.</span>lastIndex <span class="token comment" spellcheck="true">// 正则表达式开始下一次查找的索引位置,只有在有全局标志正则表达式中才有作用</span>
            <span class="token keyword">return</span> res
        <span class="token punctuation">}</span>
        <span class="token keyword">if</span> <span class="token punctuation">(</span>Object<span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>toString<span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>target<span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token string">'[object Date]'</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            res <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">target<span class="token punctuation">.</span>constructor</span><span class="token punctuation">(</span><span class="token operator">+</span>target<span class="token punctuation">)</span>
            <span class="token keyword">return</span> res
        <span class="token punctuation">}</span>
        <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span> i<span class="token operator">&lt;</span>Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>target<span class="token punctuation">)</span><span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">var</span> key <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>target<span class="token punctuation">)</span><span class="token punctuation">[</span>i<span class="token punctuation">]</span>
            res<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token keyword">typeof</span> target<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">===</span> <span class="token string">'object'</span><span class="token punctuation">)</span> <span class="token operator">?</span> <span class="token function">depClone</span><span class="token punctuation">(</span>target<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">)</span> <span class="token punctuation">:</span> target<span class="token punctuation">[</span>key<span class="token punctuation">]</span>
        <span class="token punctuation">}</span>
        <span class="token keyword">return</span> res
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> target
<span class="token punctuation">}</span>

<span class="token keyword">function</span> deepCloneNonRecursive <span class="token punctuation">(</span>target<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span><span class="token punctuation">(</span><span class="token operator">!</span><span class="token function">getType</span><span class="token punctuation">(</span>target<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token keyword">return</span> target
    <span class="token keyword">let</span> res <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">target<span class="token punctuation">.</span>constructor</span>
    <span class="token keyword">var</span> stack <span class="token operator">=</span> <span class="token punctuation">[</span><span class="token punctuation">{</span> target<span class="token punctuation">,</span> res <span class="token punctuation">}</span><span class="token punctuation">]</span>
    <span class="token keyword">var</span> map <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">WeakMap</span><span class="token punctuation">(</span><span class="token punctuation">)</span>

    <span class="token keyword">while</span> <span class="token punctuation">(</span>stack<span class="token punctuation">.</span>length<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">const</span> <span class="token punctuation">{</span> target<span class="token punctuation">,</span> res <span class="token punctuation">}</span> <span class="token operator">=</span> stack<span class="token punctuation">.</span><span class="token function">pop</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
        <span class="token keyword">switch</span><span class="token punctuation">(</span><span class="token function">getType</span><span class="token punctuation">(</span>target<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">case</span> <span class="token string">'Array'</span><span class="token punctuation">:</span>
                <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span> i<span class="token operator">&lt;</span>target<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                    <span class="token keyword">var</span> type <span class="token operator">=</span> <span class="token function">getType</span><span class="token punctuation">(</span>target<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span>
                    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>type<span class="token punctuation">)</span> res<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">=</span> target<span class="token punctuation">[</span>i<span class="token punctuation">]</span>
                    <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>type <span class="token operator">===</span> <span class="token string">'RegExp'</span><span class="token punctuation">)</span> res<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">copyRegExp</span><span class="token punctuation">(</span>target<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span>
                    <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>type <span class="token operator">===</span> <span class="token string">'Date'</span><span class="token punctuation">)</span> res<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">copyDate</span><span class="token punctuation">(</span>target<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span>
                    <span class="token keyword">else</span> <span class="token punctuation">{</span>
                        <span class="token keyword">if</span> <span class="token punctuation">(</span>map<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span>target<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span> res<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">=</span> target<span class="token punctuation">[</span>i<span class="token punctuation">]</span>
                        <span class="token keyword">else</span> <span class="token punctuation">{</span>
                            <span class="token keyword">var</span> tempRes <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">target</span><span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">.</span>constructor
                            res<span class="token punctuation">[</span>i<span class="token punctuation">]</span> <span class="token operator">=</span> tempRes
                            map<span class="token punctuation">.</span><span class="token keyword">set</span><span class="token punctuation">(</span>target<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">,</span> tempRes<span class="token punctuation">)</span>
                            stack<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
                                target<span class="token punctuation">:</span> target<span class="token punctuation">[</span>i<span class="token punctuation">]</span><span class="token punctuation">,</span>
                                res<span class="token punctuation">:</span> tempRes
                            <span class="token punctuation">}</span><span class="token punctuation">)</span>
                        <span class="token punctuation">}</span>
                    <span class="token punctuation">}</span>
                <span class="token punctuation">}</span>
                <span class="token keyword">break</span>
            <span class="token keyword">case</span> <span class="token string">'Set'</span><span class="token punctuation">:</span>
                <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> item <span class="token keyword">of</span> target<span class="token punctuation">.</span><span class="token function">values</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                    <span class="token keyword">var</span> type <span class="token operator">=</span> <span class="token function">getType</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span>
                    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>type<span class="token punctuation">)</span> res<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span>
                    <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>type <span class="token operator">===</span> <span class="token string">'RegExp'</span><span class="token punctuation">)</span> res<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token function">copyRegExp</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">)</span>
                    <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>type <span class="token operator">===</span> <span class="token string">'Date'</span><span class="token punctuation">)</span> res<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span><span class="token function">copyDate</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">)</span>
                    <span class="token keyword">else</span> <span class="token punctuation">{</span>
                        <span class="token keyword">if</span> <span class="token punctuation">(</span>map<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span><span class="token punctuation">)</span> res<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span>item<span class="token punctuation">)</span>
                        <span class="token keyword">else</span> <span class="token punctuation">{</span>
                            <span class="token keyword">var</span> tempRes <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">item<span class="token punctuation">.</span>constructor</span>
                            res<span class="token punctuation">.</span><span class="token function">add</span><span class="token punctuation">(</span>tempRes<span class="token punctuation">)</span>
                            map<span class="token punctuation">.</span><span class="token keyword">set</span><span class="token punctuation">(</span>item<span class="token punctuation">,</span> res<span class="token punctuation">)</span>
                            stack<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
                                target<span class="token punctuation">:</span> item<span class="token punctuation">,</span>
                                res<span class="token punctuation">:</span> tempRes
                            <span class="token punctuation">}</span><span class="token punctuation">)</span>
                        <span class="token punctuation">}</span>
                    <span class="token punctuation">}</span>
                <span class="token punctuation">}</span>
                <span class="token keyword">break</span><span class="token punctuation">;</span>
            <span class="token keyword">case</span> <span class="token string">'Map'</span><span class="token punctuation">:</span>
                <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> items <span class="token keyword">of</span> target<span class="token punctuation">.</span><span class="token function">entries</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                    <span class="token keyword">var</span> type <span class="token operator">=</span> <span class="token function">getType</span><span class="token punctuation">(</span>item<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
                    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>type<span class="token punctuation">)</span> res<span class="token punctuation">.</span><span class="token keyword">set</span><span class="token punctuation">(</span>item<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span> item<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
                    <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>type <span class="token operator">===</span> <span class="token string">'RegExp'</span><span class="token punctuation">)</span> res<span class="token punctuation">.</span><span class="token keyword">set</span><span class="token punctuation">(</span>item<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token function">copyRegExp</span><span class="token punctuation">(</span>item<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
                    <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>type <span class="token operator">===</span> <span class="token string">'Date'</span><span class="token punctuation">)</span> res<span class="token punctuation">.</span><span class="token keyword">set</span><span class="token punctuation">(</span>item<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token function">copyDate</span><span class="token punctuation">(</span>item<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
                    <span class="token keyword">else</span> <span class="token punctuation">{</span>
                        <span class="token keyword">if</span> <span class="token punctuation">(</span>map<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span>item<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span> res<span class="token punctuation">.</span><span class="token keyword">set</span><span class="token punctuation">(</span>item<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span> item<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">)</span>
                        <span class="token keyword">else</span> <span class="token punctuation">{</span>
                            <span class="token keyword">var</span> tempRes <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">item</span><span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">.</span>constructor
                            res<span class="token punctuation">.</span><span class="token keyword">set</span><span class="token punctuation">(</span>item<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">,</span> tempRes<span class="token punctuation">)</span>
                            map<span class="token punctuation">.</span><span class="token keyword">set</span><span class="token punctuation">(</span>item<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">,</span> tempRes<span class="token punctuation">)</span>
                            stack<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
                                target<span class="token punctuation">:</span> item<span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
                                res<span class="token punctuation">:</span> tempRes
                            <span class="token punctuation">}</span><span class="token punctuation">)</span>
                        <span class="token punctuation">}</span>
                    <span class="token punctuation">}</span>
                <span class="token punctuation">}</span>
                <span class="token keyword">break</span><span class="token punctuation">;</span>
            <span class="token keyword">case</span> <span class="token string">'Object'</span><span class="token punctuation">:</span>
                <span class="token keyword">var</span> keys <span class="token operator">=</span> Object<span class="token punctuation">.</span><span class="token function">keys</span><span class="token punctuation">(</span>target<span class="token punctuation">)</span>
                <span class="token keyword">for</span> <span class="token punctuation">(</span><span class="token keyword">var</span> i<span class="token operator">=</span><span class="token number">0</span><span class="token punctuation">;</span> i<span class="token operator">&lt;</span>keys<span class="token punctuation">.</span>length<span class="token punctuation">;</span> i<span class="token operator">++</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                    <span class="token keyword">var</span> key <span class="token operator">=</span> keys<span class="token punctuation">[</span>i<span class="token punctuation">]</span>
                    <span class="token keyword">var</span> type <span class="token operator">=</span> <span class="token function">getType</span><span class="token punctuation">(</span>target<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">)</span>
                    <span class="token keyword">if</span> <span class="token punctuation">(</span><span class="token operator">!</span>type<span class="token punctuation">)</span> res<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> target<span class="token punctuation">[</span>key<span class="token punctuation">]</span>
                    <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>type <span class="token operator">===</span> <span class="token string">'RegExp'</span><span class="token punctuation">)</span> res<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">copyRegExp</span><span class="token punctuation">(</span>target<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">)</span>
                    <span class="token keyword">else</span> <span class="token keyword">if</span> <span class="token punctuation">(</span>type <span class="token operator">===</span> <span class="token string">'Date'</span><span class="token punctuation">)</span> res<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token function">copyDate</span><span class="token punctuation">(</span>target<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">)</span>
                    <span class="token keyword">else</span> <span class="token punctuation">{</span>
                        <span class="token keyword">if</span> <span class="token punctuation">(</span>map<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span>target<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">)</span> res<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> target<span class="token punctuation">[</span>key<span class="token punctuation">]</span>
                        <span class="token keyword">else</span> <span class="token punctuation">{</span>
                            res<span class="token punctuation">[</span>key<span class="token punctuation">]</span> <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">target</span><span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">.</span>constructor
                            map<span class="token punctuation">.</span><span class="token keyword">set</span><span class="token punctuation">(</span>target<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">,</span> res<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">)</span>
                            stack<span class="token punctuation">.</span><span class="token function">push</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
                                target<span class="token punctuation">:</span> target<span class="token punctuation">[</span>key<span class="token punctuation">]</span><span class="token punctuation">,</span>
                                res<span class="token punctuation">:</span> res<span class="token punctuation">[</span>key<span class="token punctuation">]</span>
                            <span class="token punctuation">}</span><span class="token punctuation">)</span>
                        <span class="token punctuation">}</span>
                    <span class="token punctuation">}</span>
                <span class="token punctuation">}</span>
                <span class="token keyword">break</span>
            <span class="token keyword">default</span><span class="token punctuation">:</span>
                console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'error'</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span>
    <span class="token punctuation">}</span>
    <span class="token keyword">return</span> res
<span class="token punctuation">}</span>

<span class="token keyword">function</span> copyRegExp <span class="token punctuation">(</span>target<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> reg <span class="token operator">=</span> <span class="token regex">/\w*$/</span>
    <span class="token keyword">var</span> res <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">RegExp</span><span class="token punctuation">(</span>target<span class="token punctuation">.</span>source<span class="token punctuation">,</span> reg<span class="token punctuation">.</span><span class="token function">exec</span><span class="token punctuation">(</span>target<span class="token punctuation">)</span><span class="token punctuation">)</span>
    res<span class="token punctuation">.</span>lastIndex <span class="token operator">=</span> target<span class="token punctuation">.</span>lastIndex
    <span class="token keyword">return</span> res
<span class="token punctuation">}</span>

<span class="token keyword">function</span> copyDate <span class="token punctuation">(</span>target<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token operator">+</span>target<span class="token punctuation">)</span>
<span class="token punctuation">}</span>

<span class="token keyword">function</span> getType <span class="token punctuation">(</span>v<span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">switch</span><span class="token punctuation">(</span>Object<span class="token punctuation">.</span>prototype<span class="token punctuation">.</span>toString<span class="token punctuation">.</span><span class="token function">call</span><span class="token punctuation">(</span>v<span class="token punctuation">)</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">case</span> <span class="token string">'[object Object]'</span><span class="token punctuation">:</span>
            <span class="token keyword">return</span> <span class="token string">'Object'</span>
        <span class="token keyword">case</span> <span class="token string">'[object Array]'</span><span class="token punctuation">:</span>
            <span class="token keyword">return</span> <span class="token string">'Array'</span>
        <span class="token keyword">case</span> <span class="token string">'[object Date]'</span><span class="token punctuation">:</span>
            <span class="token keyword">return</span> <span class="token string">'Date'</span>
        <span class="token keyword">case</span> <span class="token string">'[object Map]'</span><span class="token punctuation">:</span>
            <span class="token keyword">return</span> <span class="token string">'Map'</span>
        <span class="token keyword">case</span> <span class="token string">'[object Set]'</span><span class="token punctuation">:</span>
            <span class="token keyword">return</span> <span class="token string">'Set'</span>
        <span class="token keyword">case</span> <span class="token string">'[object RegExp]'</span><span class="token punctuation">:</span>
            <span class="token keyword">return</span> <span class="token string">'RegExp'</span>
        <span class="token keyword">default</span><span class="token punctuation">:</span>
            <span class="token keyword">return</span> <span class="token boolean">false</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
</li>
<li><p>手写 ajax</p>
<pre class=" language-js"><code class="language-js"><span class="token keyword">function</span> <span class="token function">myAxios</span><span class="token punctuation">(</span>options<span class="token punctuation">)</span><span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token keyword">new</span> <span class="token class-name">Promise</span> <span class="token punctuation">(</span><span class="token punctuation">(</span>resolve<span class="token punctuation">,</span>reject<span class="token punctuation">)</span> <span class="token operator">=</span><span class="token operator">></span> <span class="token punctuation">{</span>
        <span class="token comment" spellcheck="true">// 兼容 IE5（通过 ActiveX 实现）</span>
        <span class="token keyword">var</span> xhr <span class="token operator">=</span> window<span class="token punctuation">.</span>XMLHttpRequest <span class="token operator">?</span> <span class="token keyword">new</span> <span class="token class-name">XMLHttpRequest</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">:</span> <span class="token keyword">new</span> <span class="token class-name">ActiveXObject</span><span class="token punctuation">(</span><span class="token string">'Microsoft.XMLHTTP'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">var</span> <span class="token punctuation">{</span>method<span class="token punctuation">,</span>url<span class="token punctuation">,</span>data<span class="token punctuation">}</span> <span class="token operator">=</span> options<span class="token punctuation">;</span>
        <span class="token keyword">var</span> handle <span class="token operator">=</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span>
            <span class="token comment" spellcheck="true">/**
             * XMLHttpRequest.readyState  代理当前所处的状态
             * 0   |  UNSENT  |  client 已经创建，但还未调用 open
             * 1   |  OPENED  |  已经调用了 open
             * 2   |  HEADERS_RECEIVED   |  已经调用了send，可以获得 headers 和 status
             * 3   |  LOADING | 下载中，responseText 已经包含部分数据
             * 4   |  DONE    | 下载操作已经完成
             * 
             * open 用于初始化一个请求，参数(method, url, async) 第三个参数表示是否异步，默认为 true. 和 send 方法有关
             * send 如果 open 一个异步请求，会在请求发送之后立即返回，否则直到响应到达后才返回 
             */</span>
            <span class="token keyword">if</span><span class="token punctuation">(</span>xhr<span class="token punctuation">.</span>readyState <span class="token operator">!=</span> <span class="token number">4</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token keyword">return</span><span class="token punctuation">;</span><span class="token punctuation">}</span>
            <span class="token keyword">if</span><span class="token punctuation">(</span>xhr<span class="token punctuation">.</span>state <span class="token operator">==</span> <span class="token number">200</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token function">resolve</span><span class="token punctuation">(</span>xhr<span class="token punctuation">.</span>responseText<span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span><span class="token keyword">else</span> <span class="token punctuation">{</span>
                <span class="token function">reject</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">Error</span><span class="token punctuation">(</span>xhr<span class="token punctuation">.</span>reponseText<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
        <span class="token comment" spellcheck="true">// 第三个参数表示是否异步发送请求</span>
        xhr<span class="token punctuation">.</span><span class="token function">open</span><span class="token punctuation">(</span>method<span class="token punctuation">,</span>url<span class="token punctuation">,</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        xhr<span class="token punctuation">.</span>onReadyStateChange <span class="token operator">=</span> handle<span class="token punctuation">;</span>
        <span class="token comment" spellcheck="true">/**
         * send 中 data 的类型：
         */</span>
        xhr<span class="token punctuation">.</span><span class="token function">send</span><span class="token punctuation">(</span>data<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span>
</code></pre>
</li>
</ul>

      
    </div>
    
    
    

    

    

    

    <footer class="post-footer">
      

      
      
      

      
        <div class="post-nav">
          <div class="post-nav-next post-nav-item">
            
              <a href="/2020/09/07/browser-performance-optimization/" rel="next" title="前端性能及其优化">
                <i class="fa fa-chevron-left"></i> 前端性能及其优化
              </a>
            
          </div>

          <span class="post-nav-divider"></span>

          <div class="post-nav-prev post-nav-item">
            
              <a href="/2020/09/24/http-interview/" rel="prev" title="前端面试总结 http 部分">
                前端面试总结 http 部分 <i class="fa fa-chevron-right"></i>
              </a>
            
          </div>
        </div>
      

      
      
    </footer>
  </div>
  
  
  
  </article>



    <div class="post-spread">
      
    </div>
  </div>


          </div>
          


          

  
    <div class="comments" id="comments">
    </div>
  



        </div>
        
          
  
  <div class="sidebar-toggle">
    <div class="sidebar-toggle-line-wrap">
      <span class="sidebar-toggle-line sidebar-toggle-line-first"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-middle"></span>
      <span class="sidebar-toggle-line sidebar-toggle-line-last"></span>
    </div>
  </div>

  <aside id="sidebar" class="sidebar">
    
    <div class="sidebar-inner">

      

      
        <ul class="sidebar-nav motion-element">
          <li class="sidebar-nav-toc sidebar-nav-active" data-target="post-toc-wrap">
            文章目录
          </li>
          <li class="sidebar-nav-overview" data-target="site-overview-wrap">
            站点概览
          </li>
        </ul>
      

      <section class="site-overview-wrap sidebar-panel">
        <div class="site-overview">
          <div class="site-author motion-element" itemprop="author" itemscope="" itemtype="http://schema.org/Person">
            
              <p class="site-author-name" itemprop="name">renhao</p>
              <p class="site-description motion-element" itemprop="description"></p>
          </div>

          <nav class="site-state motion-element">

            
              <div class="site-state-item site-state-posts">
              
                <a href="/archives/">
              
                  <span class="site-state-item-count">94</span>
                  <span class="site-state-item-name">日志</span>
                </a>
              </div>
            

            
              
              
              <div class="site-state-item site-state-categories">
                <a href="/categories/index.html">
                  <span class="site-state-item-count">19</span>
                  <span class="site-state-item-name">分类</span>
                </a>
              </div>
            

            

          </nav>

          
            <div class="feed-link motion-element">
              <a href="/atom.xml" rel="alternate">
                <i class="fa fa-rss"></i>
                RSS
              </a>
            </div>
          

          

          
          

          
          

          

        </div>
      </section>

      
      <!--noindex-->
        <section class="post-toc-wrap motion-element sidebar-panel sidebar-panel-active">
          <div class="post-toc">

            
              
            

            
              <div class="post-toc-content"><ol class="nav"><li class="nav-item nav-level-2"><a class="nav-link" href="#基础知识概念"><span class="nav-number">1.</span> <span class="nav-text">基础知识概念</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#内置类型"><span class="nav-number">1.1.</span> <span class="nav-text">内置类型</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Typeof和instance"><span class="nav-number">1.2.</span> <span class="nav-text">Typeof和instance</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#NaN"><span class="nav-number">1.2.1.</span> <span class="nav-text">NaN</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#"><span class="nav-number">1.2.2.</span> <span class="nav-text">??</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#类型转换"><span class="nav-number">1.3.</span> <span class="nav-text">类型转换</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#new"><span class="nav-number">1.4.</span> <span class="nav-text">new</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#async和await"><span class="nav-number">1.5.</span> <span class="nav-text">async和await</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#Proxy"><span class="nav-number">1.6.</span> <span class="nav-text">Proxy</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#精度问题"><span class="nav-number">1.7.</span> <span class="nav-text">精度问题</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#数值问题"><span class="nav-number">1.8.</span> <span class="nav-text">数值问题</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#遍历对象和数组（包括-es6）"><span class="nav-number">1.9.</span> <span class="nav-text">遍历对象和数组（包括 es6）</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#对象"><span class="nav-number">1.9.1.</span> <span class="nav-text">对象</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#数组"><span class="nav-number">1.9.2.</span> <span class="nav-text">数组</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#es5-继承和-es6继承的区别"><span class="nav-number">1.10.</span> <span class="nav-text">es5 继承和 es6继承的区别</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#js-继承与-java-继承区别"><span class="nav-number">1.10.1.</span> <span class="nav-text">js 继承与 java 继承区别</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#令对象不可新增属性，但可以修改当前属性用什么？"><span class="nav-number">1.11.</span> <span class="nav-text">令对象不可新增属性，但可以修改当前属性用什么？</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#toString-与-valueOf"><span class="nav-number">1.12.</span> <span class="nav-text">toString 与 valueOf</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#parseInt-、parseFloat"><span class="nav-number">1.13.</span> <span class="nav-text">parseInt 、parseFloat</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#拖拽事件"><span class="nav-number">1.14.</span> <span class="nav-text">拖拽事件</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#事件相关"><span class="nav-number">1.15.</span> <span class="nav-text">事件相关</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#多异步网络请求串联"><span class="nav-number">1.16.</span> <span class="nav-text">多异步网络请求串联</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#try-catch"><span class="nav-number">1.17.</span> <span class="nav-text">try catch</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#正则表达式"><span class="nav-number">1.18.</span> <span class="nav-text">正则表达式</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#js-中跨域问题"><span class="nav-number">1.19.</span> <span class="nav-text">js 中跨域问题</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#js-中节流防抖区别与应用场景"><span class="nav-number">1.20.</span> <span class="nav-text">js 中节流防抖区别与应用场景</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#es6-新特性"><span class="nav-number">1.21.</span> <span class="nav-text">es6 新特性</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#js-中的垃圾收集机制"><span class="nav-number">1.22.</span> <span class="nav-text">js 中的垃圾收集机制</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#cookie-、session、token、storage-和-worker"><span class="nav-number">1.23.</span> <span class="nav-text">cookie 、session、token、storage 和 worker</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#js-中的事件循环和宏-微任务"><span class="nav-number">1.24.</span> <span class="nav-text">js 中的事件循环和宏/微任务</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#js-中的模块化"><span class="nav-number">1.25.</span> <span class="nav-text">js 中的模块化</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#安全问题（常考-xss-和-csrf）"><span class="nav-number">2.</span> <span class="nav-text">安全问题（常考 xss 和 csrf）</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#XSS"><span class="nav-number">2.1.</span> <span class="nav-text">XSS</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#实例："><span class="nav-number">2.1.1.</span> <span class="nav-text">实例：</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#防范："><span class="nav-number">2.1.2.</span> <span class="nav-text">防范：</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#csrf"><span class="nav-number">2.2.</span> <span class="nav-text">csrf</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#实例"><span class="nav-number">2.2.1.</span> <span class="nav-text">实例</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#防范：-1"><span class="nav-number">2.2.2.</span> <span class="nav-text">防范：</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#sql-注入"><span class="nav-number">2.3.</span> <span class="nav-text">sql 注入</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#防护"><span class="nav-number">2.3.1.</span> <span class="nav-text">防护</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#主动攻击和被动攻击"><span class="nav-number">2.4.</span> <span class="nav-text">主动攻击和被动攻击</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#看代码说输出"><span class="nav-number">3.</span> <span class="nav-text">看代码说输出</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#手写常见-js-题"><span class="nav-number">4.</span> <span class="nav-text">手写常见 js 题</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#闭包"><span class="nav-number">4.1.</span> <span class="nav-text">闭包</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#promise-相关"><span class="nav-number">4.2.</span> <span class="nav-text">promise 相关</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#继承、原型链相关"><span class="nav-number">4.3.</span> <span class="nav-text">继承、原型链相关</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#数组相关-api"><span class="nav-number">4.4.</span> <span class="nav-text">数组相关 api</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#其他"><span class="nav-number">4.5.</span> <span class="nav-text">其他</span></a></li></ol></li></ol></div>
            

          </div>
        </section>
      <!--/noindex-->
      

      

    </div>
  </aside>


        
      </div>
    </main>

    <footer id="footer" class="footer">
      <div class="footer-inner">
        <div class="copyright">&copy; <span itemprop="copyrightYear">2020</span>
  <span class="with-love">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">renhao</span>

  
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-area-chart"></i>
    </span>
    
      <span class="post-meta-item-text">Site words total count&#58;</span>
    
    <span title="Site words total count">265.9k</span>
  
</div>


  <div class="powered-by">由 <a class="theme-link" target="_blank" href="https://hexo.io">Hexo</a> 强力驱动</div>



  <span class="post-meta-divider">|</span>



  <div class="theme-info">主题 &mdash; <a class="theme-link" target="_blank" href="https://github.com/iissnan/hexo-theme-next">NexT.Muse</a> v5.1.4</div>




        







        
      </div>
    </footer>

    
      <div class="back-to-top">
        <i class="fa fa-arrow-up"></i>
        
      </div>
    

    

  </div>

  

<script type="text/javascript">
  if (Object.prototype.toString.call(window.Promise) !== '[object Function]') {
    window.Promise = null;
  }
</script>









  












  
  
    <script type="text/javascript" src="/lib/jquery/index.js?v=2.1.3"></script>
  

  
  
    <script type="text/javascript" src="/lib/fastclick/lib/fastclick.min.js?v=1.0.6"></script>
  

  
  
    <script type="text/javascript" src="/lib/jquery_lazyload/jquery.lazyload.js?v=1.9.7"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/velocity/velocity.ui.min.js?v=1.2.1"></script>
  

  
  
    <script type="text/javascript" src="/lib/fancybox/source/jquery.fancybox.pack.js?v=2.1.5"></script>
  


  


  <script type="text/javascript" src="/js/src/utils.js?v=5.1.4"></script>

  <script type="text/javascript" src="/js/src/motion.js?v=5.1.4"></script>



  
  

  
  <script type="text/javascript" src="/js/src/scrollspy.js?v=5.1.4"></script>
<script type="text/javascript" src="/js/src/post-details.js?v=5.1.4"></script>



  


  <script type="text/javascript" src="/js/src/bootstrap.js?v=5.1.4"></script>



  


  




	





  





  










  <script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
  <script src="//unpkg.com/valine/dist/Valine.min.js"></script>
  
  <script type="text/javascript">
    var GUEST = ['nick','mail','link'];
    var guest = 'nick,mail,link';
    guest = guest.split(',').filter(item=>{
      return GUEST.indexOf(item)>-1;
    });
    new Valine({
        el: '#comments' ,
        verify: false,
        notify: false,
        appId: '2P1xqUWiCoNm14MH4yhURlJi-gzGzoHsz',
        appKey: 'uJN0uagHIVgXtBO1OuLV9Ban',
        placeholder: 'Just go go',
        avatar:'mm',
        guest_info:guest,
        pageSize:'10' || 10,
    });
  </script>



  





  

  

  

  
  

  

  

  

</body>
</html>
